Mouse over image, display text in a fixed location?

HTML & CSS
, ,
1

Hello everyone. I made an account to post this annoying problem I’m having that I can’t seem to solve.

So here it is:
On this website, I want to have 4 icons, (pictures, or by using fontawesome) that when you click, (or rollover, I’d take either at this point) it pops up some text OVER the four images. The area where it pops up should be only to the edges of the four images. It should be simple enough, but I just can’t figure it out. HTML5 please. I’m pretty new, so maybe that’s why I can’t figure out this simple thing.

If anyone could help, that’d be greatly appreciated.

1 Like
2

Hi, GMR, welcome to the fourms.

If you can provide us with a link to your test site, it would allow us to see exactly what you are describing and offer better suggestions. A screen shot pointing out the problem and the desired solution might help, too.

1 Like
3

Thanks for the reply!

http://garrettreeves.com/de/

So, if you scroll down to “Some Nuts, Some Bolts”, you’ll see four images rendered with FontAwesome. When you click one of those, I’d like text to appear/fade in/pop up whatever, in the area of those four images, but not bigger.

1 Like
4

In the spirit of guessing to see what you vaguely envision, I would like to suggest that you copy the code in this post to a file and open it in your browser and see how it behaves. It’s a working page, so copy and paste exactly what you see. If this is close to your wish, then perhaps you can adapt it to work in your page.

Hover State Size - #8 by PaulOB

fingers crossed

1 Like
5

Thanks again for the reply,

This is REALLY close to what I want, and I’m really excited. However, is there a way to make it so that when I roll over the image, and the black overlay slides in and displays text, is it able to display over every other image too? Like, the overlay encompasses all the images together, to show one big text box where I can have a paragraph of text/titles and stuff? But each image would have different text appear on the big overlay that comes in. Sorry for my many questions.

1 Like
6

I got kinda close. I have one image that I have image maps on, but they don’t get called on a hover function. Looked it up, and it turns out that you can’t use hover functions in <.area> tags. I attempted to use many workarounds that I found online, but no dice yet. Any thoughts?

7

Yes that would be possible and you’d just need to move the position:relative to a main point of reference rather than around each image block.
e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
img {
	display:block;
}
.imgwrap {
	display:inline-block;
	vertical-align:middle;
	width:44%;
	margin:0 2% 20px;
}
.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)
}
.point-of-reference {
	position:relative;
	width:660px;
	margin:auto;
	text-align:center;
	padding:10px;
	border:1px solid #000;
	overflow:hidden;
}
</style>
</head>

<body>
<div class="point-of-reference">
  <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 One</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 Two</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 Three</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 Four</h3>
          <p>Rollover content to remain at center of element</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

We’d need to see a demo of what you have so far as there could be a number of things to consider.

1 Like
8

:open_mouth:

Thank you so much! I checked on this this morning and it works perfectly. My many thanks to you, good sir. ;u;

EDIT: One more thing though. Your code works beautifully, but let’s say I move my mouse over the first picture. The first picture’s content comes up on the scrollover. Then, if I take my mouse off, and move it onto another picture that’s NOT the first one really fast, before the animation is done playing, the first picture’s content comes back in. I’m guessing this is because it hasn’t ‘reset’, so I ‘tricked’ it into coming back out. Any way around this? I guess I could just make the switch close to instantaneous and hope people aren’t throwing their mouses around, but it’d be cool if there was a better solution. Thoughts?

Thanks again.

1 Like
9

You can speed up the “reset” portion of the animation or eliminate it altogether.

1 Like
10

I’m not quite sure what you mean but if you pass your mouse over the first image to get to the second image then the first image will trigger the mouse over because you went over it first unless you went faster than the rollover appeared.

If you want to ensure that only the currently hovered image is showing then you can add pointer-events:none to the rollover element and then the hover will pass through to the image under the pointer no matter what.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
img {
	display:block;
}
.imgwrap {
	display:inline-block;
	vertical-align:middle;
	width:44%;
	margin:0 2% 20px;
}
.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;
	pointer-events:none;
}
.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)
}
.point-of-reference {
	position:relative;
	width:660px;
	margin:auto;
	text-align:center;
	padding:10px;
	border:1px solid #000;
	overflow:hidden;
}
</style>
</head>

<body>
<div class="point-of-reference">
  <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 One</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 Two</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 Three</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 Four</h3>
          <p>Rollover content to remain at center of element</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

(pointer-events is available in ie11+ and other modern browsers.)

Of course if you wanted clickable content in the rollover such as links then you can’t use that method.

2 Likes
11

This is literally EXACTLY what I want, thank you so much. You’ve been a great help. :smile:

1 Like
12

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