How to achieve picture drawer effect with css

First, let’s take a look at the effect:

The principle of realizing this effect is very simple: as long as you master css3 animation and transition related Knowledge is enough, no js code is needed;

(recommended tutorial: CSS introductory tutorial)

HTML code:

<div>
        <ul id="list">
            <li >
                <a href="">国际美妆抢先看</a>
                <img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   / alt="How to achieve picture drawer effect with css" >
            </li>
            <li>
                <a href="">女神标准大讨论</a>
                <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"   / alt="How to achieve picture drawer effect with css" >
            </li>
            <li class="select">
                <a href="">吃货也能越吃越瘦</a>
                <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"   / alt="How to achieve picture drawer effect with css" >
            </li>
            <li>
                <a href="">连衣裙抢头条</a>
                <img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"   / alt="How to achieve picture drawer effect with css" >
            </li>
            <li>
                <a href="">宫三女主美妆对决</a>
                <img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"   / alt="How to achieve picture drawer effect with css" >
            </li>
        </ul>
    </div>

CSS code:

*{ margin:0;padding:0; }
    ul{ list-style:none; }
    a{ font-size:16px;text-decoration:none;color:#666; }
    div{ width:300px;margin:20px auto; }
    #list li{ line-height:40px;height:40px;background:#efefef;text-indent:1em; margin-bottom:3px;overflow:hidden;-webkit-transition:height 0.3s ease;-moz-transition:height 0.3s ease-ms-transition:height 0.3s ease;-o-transition:height 0.3s ease;transition:height 0.3s ease;}
    #list li img{ width:300px;height:200px;}
    #list li:nth-child(1){height:240px;background:#F36;}
    #list li:nth-child(1) a{ color:#fff; }
    #list:hover li{ height:40px;background:#efefef; }
    #list:hover li a{color:#666;}
    #list li:hover{ height:240px; background:#F36;}
    #list li:hover a{ color:#fff; }

For more programming-related content, please pay attention to the Introduction to Programming column on the php Chinese website!

The above is the detailed content of How to achieve picture drawer effect with css. For more information, please follow other related articles on the PHP Chinese website!