Share an example of using pure CSS to display image effects on mouse hover

Here I would like to recommend an example of using pure CSS to achieve the effect of displaying images on mouse hover. It is demonstrated in the simplest way of adding hover by moving the mouse to the tr tag. It is simple and clear. Friends who need it can refer to it.

Recently I am working on a network disk project, using the effect of moving the mouse up. This effect can be achieved with js. Today I will mainly share how to achieve this effect with pure css!

The effect is as shown below:

html code

<table id="filelist" style="width:100%;">
   <tbody>
        <tr>
            <td class="filename ui-draggable ui-droppable"  width="30%;">
                <p class="name">
                    <span class="fileactions">
                        <a href="#" class="action action-download" data-action="Download" original-title="">
                            <img  class="svg lazy"  src="/static/imghwm/default1.png"  data-src="svg/download.svg"    alt="Share an example of using pure CSS to display image effects on mouse hover" >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share permanent" data-action="Share" original-title="">
                            <img  class="svg lazy"  src="/static/imghwm/default1.png"  data-src="svg/public.svg"    alt="Share an example of using pure CSS to display image effects on mouse hover" >
                            <span>已共享</span>
                        </a>
                    </span>
                </p>
            </td>
            <td class="filesize" style="color:rgb(-4780,-4780,-4780)">70.3 MB</td>
            <td class="date">
                <span class="modified" title="September 29, 2014 14:45" style="color:rgb(0,0,0)">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>

        <tr >
            <td class="filename ui-draggable ui-droppable"  width="30%;">
                <p class="name" >
                    <span class="fileactions">
                        <a href="#" class="action action-download" data-action="Download">
                            <img  class="svg lazy"  src="/static/imghwm/default1.png"  data-src="svg/download.svg"    alt="Share an example of using pure CSS to display image effects on mouse hover" >
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share" data-action="Share">
                            <img  class="svg lazy"  src="/static/imghwm/default1.png"  data-src="svg/share.svg"    alt="Share an example of using pure CSS to display image effects on mouse hover" >
                            <span>分享</span>
                        </a>
                    </span>
                </p>
            </td>
            <td class="filesize" style="color:rgb(159,159,159)">762 kB</td>
            <td class="date">
                <span class="modified" style="color:rgb(0,0,0)" original-title="September 29, 2014 16:36">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>
        </tbody>
</table>

I copied the above code directly from the project, there may be a lot of redundancy css, everyone just takes a look at the general code!

Essential css

The general idea of ​​implementing the effect in the picture is to set it to opacity=0 at the beginning, and then display it after the mouse is moved up.

The code is as follows:

#filelist a.action {   
    display: inline;   
    padding: 18px 8px;   
    line-height: 50px;   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   
    filter: alpha(opacity=0);   
    opacity: 0;   
    display:none;   
}   
#filelist tr:hover a.action , #filelist a.action.permanent{   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   
    filter: alpha(opacity=50);   
    opacity: .5;   
    display:inline;   
}   
#filelist tr:hover a.action:hover {   
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";   
    filter: alpha(opacity=100);   
    opacity: 1;   
    display:inline;   
}

The above is the approximate essence of the code!

css skill analysis

Move the tr mouse up, and the a tag below shows that you can choose like this #filelist tr:hover a.action Add tr and move the mouse up to hover, Then the effect of moving the mouse up on the a tag under tr is also useful. Write like this: #filelist tr:hover a.action:hover

There is attr in jquery, and the attributes of the active tag, css can also be the same as jquery Similar options.

For example, in the following a tag

<a href="#"  data-action="Rename"  class="action"></a>

, we can write the style like this:

 a.action[data-action="Rename"]{   
    padding: 16px 14px 17px !important;   
    position: relative;   
    top: -21px;   
}

After reading this article, Did you gain something? I wonder if you have a closer understanding of CSS through this article!

The above is the detailed content of Share an example of using pure CSS to display image effects on mouse hover. For more information, please follow other related articles on the PHP Chinese website!