CODEWITHSUNDEEP
htmlcsshover
nicobld
nicobld

Reputation: 129

Change an <img> elements by hovering an other <img>

As I said in the title, I would like to change an img by hovering an other img. My first img that I will hover will be called "voir-plus-mini-img-avant" and the second img will be called "voir-plus-img-avant".

Here's my html code :

<div class="voir-plus-container">
    <div class="voir-plus-mini-img">
        <img src="file:///C:/HTML/vente-de-guitares/guitare-img/guitare.jpg" class="voir-plus-mini-img-avant">
    </div>
    <div class="voir-plus-image">
        <img src="file:///C:/HTML/vente-de-guitares/guitare-img/guitare.jpg" class="voir-plus-img-avant">
    </div>
</div>

And my CCS

.voir-plus-mini-img-avant:hover ~ .voir-plus-img-avant {
    display: block;
}

.voir-plus-img-avant {
    display: none;
}

So when you hover "voir-plus-mini-img-avant" the "voir-plus-img-avant" gets to be desplayed as a block. Normaly, "voir-plus-img-avant" wont be displayed. I saw by doing reseach that ~ is when you want to do an action on an other by hovering one. But it isn't working :(

So if you could help me, it would be nice :)

Ps : I can't put the 1st img into the other big div because the 2 images arent the same size and stuff.

Upvotes: 1

Views: 117

Answers (4)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

Something like this?

https://jsfiddle.net/Hastig/roufhj8m/

Or more like this?

http://jsfiddle.net/Hastig/s4q40yxj/2/

html

<div class="thumbs-div">
    <img src="http://i.imgur.com/c0lfxLU.png" class="small s1">
    <img src="http://i.imgur.com/yfNIfVR.jpg" class="small s2">
    <img src="http://i.imgur.com/0hLtbEh.jpg" class="small s3">
    <img src="http://i.imgur.com/sVUEr5j.jpg" class="small s4">
    <img src="http://i.imgur.com/XCbY5Di.jpg" class="small s5">

    <img src="http://i.imgur.com/c0lfxLU.png" class="big b1">
    <img src="http://i.imgur.com/yfNIfVR.jpg" class="big b2">
    <img src="http://i.imgur.com/0hLtbEh.jpg" class="big b3">
    <img src="http://i.imgur.com/sVUEr5j.jpg" class="big b4">
    <img src="http://i.imgur.com/XCbY5Di.jpg" class="big b5">
</div>

css

.thumbs-div {
    width: 520px;
}

.small {
    width: 100px;
    height: 100px;
}

.big {
    width: 516px;
    height: 300px;
}

.b1 {
    display: block;
}

.b2, .b3, .b4, .b5 {
    display: none;
}

.s2:hover ~ .b2, .s3:hover ~ .b3, .s4:hover ~ .b4, .s5:hover ~ .b5 {
    display: block;
}

.s2:hover ~ .b1, .s3:hover ~ .b1, .s4:hover ~ .b1, .s5:hover ~ .b1 {
    display: none;
}

Upvotes: 1

Tomasz
Tomasz

Reputation: 81

You can use jQuery to do this.

Is several way to hover that element. I recomend you to do this like:

1) create a new class like .active;
2) add display none to your both image
3) create jquery function. I wrote example here [https://jsfiddle.net/bvnaqL2s/][1]

Upvotes: 0

cdMinix
cdMinix

Reputation: 675

The css + selector selects all elements immediately after another element. If your order of elements doesn't change, this solution might work for you:

.voir-plus-image > .voir-plus-img-avant {
  display: none;
}

.voir-plus-mini-img:hover + .voir-plus-image > .voir-plus-img-avant  {
  display: block;
}

See http://codepen.io/anon/pen/dPELBq for demonstration.

The only letdown of this css-only solution is that you have to depend on the div, not the img for hovering. If you can't have that, your only alternative would be javascript.

Upvotes: 0

Marin B&#238;nzari
Marin B&#238;nzari

Reputation: 5348

Try this:

.voir-plus-container .voir-plus-image,
.voir-plus-container:hover .voir-plus-mini-img {
    display: none;
}

.voir-plus-container:hover .voir-plus-image {
    display: block;
}

div.voir-plus-image will be hidden by default, on hover it will be displayed and div.voir-plus-mini-img will be hidden.

Upvotes: 0

Related Questions