Hover State Size

Hello, I have a CSS transition hover state on my products
section on this PAGE. However in a smaller viewport when I
hover on the product it does not adjust to the size of the
photo and container is it possible to adjust it to change of
the image size?

Hey @csosa. On a touch screen there is no such thing as hover. Could this be the cause of your problem?

Very true, but if a user changes the viewport on the desktop browser,
isnt it ideal to workout issues like this even if its not mobile or tablet?

Well I can just hide the hover state in smaller viewport…would that be
a better solution?

I wasn’t sure how you achieved the smaller viewport. IMO you’re doing the right thing to iron out problems this way.

However, if the only thing is that the hover isn’t working and it doesn’t break the design, I wouldn’t consider it a problem. There may be others who disagree…

1 Like

It’s pretty possible if you have a smaller laptop (netbook) and you dual screen (perhaps youtube/netflix and then the other half is code or something).

1 Like

If you wrapped a div around the image and the hover element and set the div to position:relative you could place the hover element at top:0;right:0;bottom:0; left:0 and it would keep track with the image size.

At the moment you could make the red div hover the whole block using the following code.

.content2{
position:absolute;
height:100%;
width:100%;;
top:0;
left:0;
right:0;
bottom:0;
display:flex;
}
.content2 p {
margin:auto;
}

Browsers that don;t understand display:flex won’t get the full height for the red background

If you needed older browser support instead of flex then you would need to add an extra div around the red background element and position that absolutely and then use display table and display:table-cell on two elements inside.

1 Like

Hi Thanks for this, this code is very similar when I was trying to solve it… I was so close:grin:,
however I want the hover to only cover the image and not the text. Is it possible to say the height a different
way instead of saying this?:

height:100%;

and what does display:flex do exactly?

alright ill add this.

You could remove height and set a different position for bottom instead of 0 but the problem is you have no fixed height to work against because the bottom part of your div is fluid text that has no set height so all you can do is guess.

What you needed to do as I mentioned above is isolate the image in its own div and make sure the rollover code is also within that same div and then you can always match exactly the height of the image.

Here’s an example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
img{display:block;}
.imgwrap {
	float:left;
	width:30%;
	position:relative;
	margin:0 2% 20px 0;
	overflow:hidden;
}
.imgwrap img {
	width:100%;
	height:auto
}
.rollover {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
	color:#fff;
	transform:translateX(-100%);
	transition:all .5s ease;
}
.roll-inner{
	display:table;
	width:100%;
	height:100%;
}
.roll-content{
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.roll-content h3,.roll-content p{width:70%;margin:auto;}
.imgwrap:hover .rollover{transform:translateX(0)}



</style>
</head>

<body>
<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg1.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>

<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg4.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg2.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg4.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

More or less everything that you ever dreamed of :smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.