Css Hover Image Show Div

I have tried to add + but div .shopbar_image_over doesn't show.

Solution 1:

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_containerimg {
  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_containerimg:hover + .shopbar_image_over {
  display: block;
}

<divclass="shopbar_image_container"><imgsrc="img/t.jpg" /><divclass="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_containerimg {
  height: 190px;
  width: 190px;
  cursor: pointer;
}
.shopbar_image_over {
  display: none;
  height: 190px;
  width: 190px;
  opacity: 0.2;
  background: #444;
  position: absolute;
  cursor: pointer;
}

<divclass="shopbar_image_container"><divclass="shopbar_image_over"id="divToShow"></div><imgsrc="img/t.jpg"id="baseImage" /></div>

Solution 2:

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_containerimg{
	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_containerimg:hover + .shopbar_image_over{
	display:block;	
}

<divclass="shopbar_image_container"><imgsrc="http://lorempixel.com/400/400/" /><divclass="shopbar_image_over"></div></div>

Solution 3:

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!

Solution 4:

Try working with just opacity - a bit simpler that selectors:

.shopbar_image_containerimg{
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;	
 }

<divclass="shopbar_image_container"><divclass="shopbar_image_over"></div><imgsrc="img/t.jpg" /></div>