I have tried to add + but div .shopbar_image_over doesn't show.
.shopbar_image_container img { height: 190px; width: 190px; cursor: pointer; } .shopbar_image_over { display: none; height: 190px; width: 190px; opacity: 0.2; background: #444; position: absolute; cursor: pointer; } .shopbar_image_container img:hover + .shopbar_image_over { display: block; }<div class="shopbar_image_container"> <div class="shopbar_image_over"></div> <img src="img/t.jpg" /> </div>Adjacent Sibling Selector (+) works on the adjacent next sibling in the DOM and not the previous one. In this case the div that you are wanting to show while hovering on the img is above or prior to the img in the DOM and hence the + selector will not work.
You have to either modify your HTML like in the below snippet or use alternate methods (involving JS).
.shopbar_image_container img { height: 190px; width: 190px; cursor: pointer; position: relative; /* added for positioning relative to img */ } .shopbar_image_over { display: none; height: 190px; width: 190px; opacity: 0.2; background: #444; position: absolute; top: 8px; /* added for positioning */ cursor: pointer; } .shopbar_image_container img:hover + .shopbar_image_over { display: block; }<div class="shopbar_image_container"> <img src="img/t.jpg" /> <div class="shopbar_image_over"></div> </div>Option 2: (Using JS)
Here the HTML structure is not modified, but JS is used to display the div when the mouse is over the img. Since the div is positioned absolutely over the img, the mouse out is set on the div and when the mouse is out, the div is hidden.
document.getElementById("baseImage").onmouseover = function() { document.getElementById("divToShow").style.display = "block"; } document.getElementById("divToShow").onmouseout = function() { document.getElementById("divToShow").style.display = "none"; }.shopbar_image_container img { height: 190px; width: 190px; cursor: pointer; } .shopbar_image_over { display: none; height: 190px; width: 190px; opacity: 0.2; background: #444; position: absolute; cursor: pointer; }<div class="shopbar_image_container"> <div class="shopbar_image_over" id="divToShow"></div> <img src="img/t.jpg" id="baseImage" /> </div>Well the trick is to add position: absolute from the bottom to shopbar_image_container,
Then add margin-top: this.height in px or tramsform: translateY(this.height px) to be able to display .shopbar_image_over
*{box-sizing: border-box} .shopbar_image_container{ position: relative; height:190px; width:190px; margin-top: 190px } .shopbar_image_container img{ height:100%; cursor:pointer } .shopbar_image_over{ display:none; height:100%; width:100%; opacity:0.2; background:#444; position:absolute; bottom: 100%; cursor:pointer; } .shopbar_image_container img:hover + .shopbar_image_over{ display:block; }<div class="shopbar_image_container"> <img src="http://lorempixel.com/400/400/" /> <div class="shopbar_image_over"></div> </div>Check this simple example:
HTML:
<a>Hover over me!</a> <div>Stuff shown on hover</div> CSS:
div { display: none; } a:hover + div { display: block; } JSFiddle: http://jsfiddle.net/n03br282/
Hope its helps!
Try working with just opacity - a bit simpler that selectors:
.shopbar_image_container img{ height:190px; width:190px; cursor:pointer; } .shopbar_image_over{ display:block; height:190px; width:190px; opacity:0; background:#444; position:absolute; cursor:pointer; } .shopbar_image_container .shopbar_image_over:hover{ opacity:0.2; } <div class="shopbar_image_container"> <div class="shopbar_image_over"></div> <img src="img/t.jpg" /> </div>