Multi-Dimensional Image Display

I saw newtonrunning, a website on Awwwards, and liked the menu Switching Effect and the multi-dimensional display effect of shoes. Then I could not help but copy a multi-dimensional image display effect, you can enjoy the effect, study online, and download to favorites.

Main knowledge points in this case

1. Use of css counter counters

2. Adaptive design (percentage implementation)

3. CSS3 Transition (Transition)

4. Complex selector usage

Okay, let's get started. First, let's look at html. We use ul> li as the menu item for navigation. There is nothing in it. The element that shows the image is placed at the level parallel with li, this allows you to use the sibling selector to select instances in the future.

<Ul class = "menu"> <li> <a href = "#"> </a> </li> <a href = "#"> </ a> </li> <a href = "#"> </a> </li> <a href = "#"> </a> </li> <a href = "#"> </a> </li> <a href = "#"> </a> </ li> <! -- Put the image display element together with li to select the element with the sibling selector --> <div class = "pic"> </div> </ul>

We used normalize.css to reconcile browser differences.

<link rel="stylesheet" type="text/css" href="css/normalize.css"/>

Then we will perform global settings to set the page background, overflow, list items, and box size model.

/** Global settings * Page background, content overflow settings * list items, box size settings **/body {background: # FCCC46; overflow: hidden;} li, li :: before, li :: after {list-style-type: none;-moz-box-sizing: border-box ;}

Menu settings, where we can reset the counter

/** Overall menu settings * width, height, transparency * horizontal and vertical center settings. For details, refer to this blog's CSS center alignment article * transition attribute settings * counter reset **/. menu {width: 100%; height: 30%; margin: auto; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;-webkit-transition: all 1 s;-moz-transition: all 1 s;-ms-transition: all 1 s;-o-transition: all 1 s; transition: all 1 s; counter-reset: liCounter;}/** menu Hover setting * Transparency change **/. menu: hover {opacity: 1 ;}

To set a menu item, we need to set the width and height, background color, border, mouse style, and transition attribute of the menu item. We need to specify the counter to add

/** Menu list item settings * width and height settings. Here, the percentage is used for adaptive * Background color, border, and mouse style settings * transition attribute settings * counter increase **/. menu li {float: left; width: 16.666%; height: 100%; border: 1px dashed rgba (255,255,255 ,. 5); border-width: 0 1px 0 0; background-color: rgba (255,255,255, 0.05); cursor: pointer; position: relative; counter-increment: liCounter; z-index: 2;-webkit-transition: all 1 s;-moz-transition: all 1 s;-ms-transition: all 1 s;-o-transition: all 1 s; transition: all 1 s;}/** menu item Hover Set * Background color change **/. menu li: hover {background-color: rgba (255,255,255, 0.1 );}

The prompt text settings are implemented using pseudo objects. You Need To Set width, height, background color, border, transparency, location settings, and transition attributes, and use counters to display the prompt text.

/** Prompt text (pseudo object implementation) setting * content setting, use the counter * width, height, background color, border, transparency * position to set * transition attribute setting * text style setting **/. menu li: before {content: counter (liCounter) '/6'; width: 100%; height: 30px; border: 1px solid rgba (, 0 ,. 5); border-width: 0 1px; position: absolute; left: 0; top: 0; text-align: center; opacity: 0;-webkit-transition: all 1 s;-moz-transition: all 1 s;-ms-transition: all 1 s;-o-transition: all 1 s; transition: all 1 s ;} /** prompt text hover setting * change location and transparency **/. menu li: hover: before {top: 40%; opacity: 1 ;}

Settings of image display elements

/** Image setting * width and height setting * location setting * Background setting **/. menu. pic {width: 100%; height: 600px; background-position: center; background-repeat: no-repeat; background-size: 100% auto; position: absolute; left: 0; top: 50%; margin-top:-300px; z-index: 1;}/** image after hover Set * image display effect after hover for each menu item **/. menu li: nth-child (1): hover ~ . Pic {background-image: url ('img/1.jpg ');}. menu li: nth-child (2): hover ~ . Pic {background-image: url ('img/2.jpg ');}. menu li: nth-child (3): hover ~ . Pic {background-image: url ('img/3.jpg ');}. menu li: nth-child (4): hover ~ . Pic {background-image: url ('img/4.jpg ');}. menu li: nth-child (5): hover ~ . Pic {background-image: url ('img/5.jpg ');}. menu li: nth-child (6): hover ~ . Pic {background-image: url ('img/6.jpg ');}

OK, That's all, Thank you.

---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------