Image popup on mouseover/hover

  • I have a table set up with a list of items and I have been trying to have a ‘preview’ image to pop up on screen when the user hovers his mouse over an icon (in one of the columns). I’ve successfully got my popup image to pop up but I’m having a few problems with it – 1) the image isn’t popping up where I want it to and 2) sometimes the right column of my main page covers the popup image, meaning text and images in the right column will be overlayed on top. Hard to explain, easier to show. Check out this page, any help is appreciated:

    usmicroscrew.com/standard-micro-fasteners/

    This is the css that I pieced together:

    #popup {
	color: #fff;
	background-color: #fff;
}

#popup a span {
	display: none;
}

#popup a:hover {
	background-color: #fff;
}

/* the IE correction rule */
#popup a:hover {
	color: #fff;
	background-color: #fff;
	text-indent: 0; /* added the default value */
}

#popup a:hover span {
	display: block;
	position: fixed;
	top: 15%;
	left: 17%;
	width: 700px;
	margin: 0;
	padding: 10px;
	color: #000;
	font-weight: normal;
	background: #fff;
	text-align: left;
	border: 1px solid #000;
}

    And this is how I’m wrapping the image that I want the hover/popup to happen on

    <div id="popup">
<a href="https://www.usmicroscrew.com/micro-screw-cad-files/M06-30-M-SS-P.pdf">
<img src="https://www.usmicroscrew.com/wp-content/uploads/pdf-download-icon.png" alt="" width="22" height="26" class="aligncenter size-full wp-image-568" />
<span><img src="https://www.usmicroscrew.com/micro-screw-cad-files/micro-screw-pics/M06-30-M-SS-P.JPG" alt="Standard Mini Fasteners Drawing Popup"></span>
</a>
</div>

    Ideally I want to image popup to start just to the right of the mouseover link, like I’ve mocked up in this image below. Any help is appreciated.
    Screenshot

Viewing 1 replies (of 1 total)
  • Brian

    (@briansteeleca)

    Definitely a good start. There’s a couple things you can change to get what you want.

    To move the popup to the right of the mouseover link, you can adjust the left position:

    #popup a:hover span {
	display: block;
	position: fixed;
	top: 15%;
	left: 17%;

    … (rest of the code)

    You may have to experiment, but try changing left to 20% to move it further to the right.

    To make sure the popup is on top of everything else, you can add a z-index as well:

    #popup a:hover span {
	display: block;
	position: fixed;
	top: 15%;
	left: 20%;
        z-index: 999;

    … (rest of the code)

    In order for z-index to work, the element that you apply it to must have a position set. In your case, you can see that it’s already set: position: fixed; The z-index just has to be higher than the items you want to be on top of, so 2 may actually work in this case – I’ve just used a higher number with 999.

    One thing I should point out is that your popup div should use a class, not an id. IDs are meant to be unique identifiers, and you have many <div id=”popup”>. For many, you should use a class: <div class=”popup”>.

    To style the popup class, you would change ALL instances of this: #popup to .popup

    If you’re not comfortable making that change and it’s working, I would say leave it as is, but this can cause problems for JavaScript that’s trying to target an element with an ID and finds there’s more than one.

Viewing 1 replies (of 1 total)
  • The topic ‘Image popup on mouseover/hover’ is closed to new replies.