Yesterday in the project to do a travel page, the front page implementation of the process encountered such a requirement. A set of pictures needs to be formed to display the accordion effect. After serious thinking over, the decision to use the ordinary html+css can achieve this demand. Take advantage of your free time today to comb a bit.
Implementation principle:
The main use of CSS hover properties, when the mouse is not moved up, all the Li share the entire width of the container. When the mouse move up, hover effective, let the LI tag back to the original width of the image, the other graphs share the remaining width. Add the transition attribute to create a gradient effect.
Here's a little demo to get a feel for yourself:
HTML code:
<body> <p class= "contain" > <ul> <li> <a HRE f= "#" > </a> <p clas s= "title" > <a href= "#" > Yunnan. Dali </a> </p> </l i> <li> <a href= "#" > </a> <p class= "title" > <a href= "#" > Guangxi. Guilin &L t;/a> </p> </li> <li> <a href= "#" > </a> <p class= "title" > <a href= "#" > Fujian. Xiamen </a> </p> </li& Gt <lI> <a href= "#" > </a > <p class= "title" > <a href= "#" > Zhejiang Qiandaohu </a> </p> </li> <li> <a href= "#" > </a> <p class= "title" > <a href= "#" > Changjiang River. Sanxia </a> </p> </li> </ul> ; </p></body>
CSS code:
. contain { width:1050px; margin:100px auto; } . Contain li { float:left; List-style:none; width:200px; height:284px; Transition:all 2s; position:relative; Overflow:hidden; border-left:2px Solid Rgba (255, 255, 255,. 8); box-shadow:0px 0px 20px rgba (0, 0, 0, 0.8); } . Contain ul:hover li { width:80px; } . Contain ul li:hover { width:500px; } . Contain li. title { Position:absolute; width:100%; height:50px; Background-color:rgba (0, 0, 0,. 5); Text-indent:2em; line-height:50px; bottom:0px; left:0 } . contain a { color: #fff; Text-decoration:none; }The implementation is as follows:
effect when the mouse is not moved up
Mouse moves to a picture effect
This is a very simple small demo, easy to get started, it is not difficult for beginners. At the same time also through this demo feel the strong and charm of CSS, hope to bring you a little help. Finally, comb, do a summary of the knowledge points used in this demo:
1.hover Selector
Explanation:: The hover selector is used to select the mouse pointer floating above the element. : The hover selector is available for all elements, not just links.
Add:: Link selector Sets the style of links to pages that have not been visited: the visited selector is used to set a link to a page that has been visited: the active selector is used for the active link.
Expansion: In the CSS definition, the hover must be located after link and: visited (if present) before the style can take effect.
2.transition Properties
Explanation: Transition is a shorthand property for CSS3 to set four transition properties:
Transition-property: Specifies the name of the CSS property that sets the transition effect.
Transition-duration: Specifies how many seconds or milliseconds to complete the transition effect.
Transition-timing-function: Speed curve that specifies the speed effect.
Transition-delay: Defines when the transition effect starts.
Syntax: transition:property duration timing-function delay;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
