使用悬停在图像效果上的最有效方法

Question

I know how to answer my question, I'm just posting to see if there's a better way to do what I'm already doing.

Let's say I'm making a website that sells 4 different types of posters. I want the user to see each of the posters in a row. and when they hover over each picture the image will change to show the price, and measurements of the poster.

How I achieved this:

<ul>
<li> image link here using onmouseover and onmouseout for hover over effects </li>
<li> same as above </li>
<li> same as above </li>
<li> same as above </li>
</ul

Then I just styled the list to remove bullets and aligned it horizontally. Now here's my question... I am currently using onmouseover and onmouseout for hover over effects Because you need 2 images in order to achieve this you need a lot of data, especially if you're going to do this for, say, a grid of 25 images for an art portfolio.

Is this a bad way to get a hover over effect? I'm assuming because I'm new at web-development anything I can throw onto a webpage is going to be somewhat crude and not efficient.

Answer 1

You could have another div within the <li> containing the info you wanted. Have this absolutely positioned over the image and then show it on hover using opacity .

Demo

HTML

<ul>
    <li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
    <li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
    <li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
</ul>

CSS

ul,li {
   list-style: none; 
}

li {
   display: inline-block;
   position: relative;
   z-index: 1;
}
img {
   display: block;
}

.info {
   opacity: 0;
   color: white;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   z-index: 2;
   background: red;
   .transition(opacity 0.5s ease);
}

li:hover .info {
   opacity: 1;
}

Answer 2

I made an example for you :)

You can line .image next to each other with display: inline-block;

Have a fiddle!

HTML

<div class="image">
    <img src="http://www.placehold.it/200X200" />
    <div class="text">Hello</div>
</div>

CSS

.image {
    position: relative;
    width: 200px;
    height: 200px;
}

.text {
    display: none;
}

img { 
    cursor: pointer; 
}
img:hover + .text, .text:hover {
    position: absolute;
    bottom: 0;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    padding: 10px;
    width: 180px;
    cursor: pointer;
}