javascript - Gmailアカウントのようにマウスホバーで画像変更オプションを作成する方法は?

Question

イメージを変更するためにGMailアカウントでできるように、イメージの変更機能を作成しようとしています。

イベントmousehoverでは、change imageオプションが表示されます。

多分それは私が知らないある種の新しい概念です。私は CSS と JavaScript があまり得意ではありませんが、表示オプションdivが変更されていると思います。そのような効果を達成する方法を教えてください。z-indexchange image

Answer 1

css 疑似要素を使用したバージョンを次に示します:after。

デモ

HTML:

<a href="#" class="image">
    <img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>

CSS:

.image img{
    width: 100px;
    text-decoration: none;
}

.image:after{
    content: "Change Image";
    display: block;
    position: relative;
    top: -25px;
    width: 100px;
    background-color: rgba(77, 144, 254, 0.7);
    color: white;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
    transition: opacity 300ms;
}
.image:hover:after{
    opacity: 1;
}

Answer 2

純粋な CSS ソリューションが必要な場合は、このように試すことができます

デモ

div.wrap {
    position: relative;
    display: inline-block;
}

div.wrap img {
    position: absolute;
}

div.wrap img:nth-of-type(1) {
    opacity: 0;
    transition: opacity 3s;
}

div.wrap:hover img:nth-of-type(1) {
    z-index: 2;
    opacity: 1;
}

div.wrap img:nth-of-type(2) {
    opacity: 1;
    transition: opacity 3s;
}

div.wrap:hover img:nth-of-type(2) {
    opacity: 0;
}

Answer 3

これはあなたが何を意味するのですか？

CSS

.image {
    width: 100px;
    height: auto;
}
.popup {
    top: -25px;
    left: 25px;
    width: 150px;
    height: 75px;
    position: relative;
    display: none;
    background-color: grey;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
}
.image:hover + .popup {
    display: block;
}
.popup:hover {
    display: block;
}

HTML

<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup"><a href="#">Change Image</a></div>

jsfiddleについて