|
|
| Line 17: |
Line 17: |
| | } | | } |
| | | | |
| − | /*Time for the CSS*/
| |
| − | * {margin: 0; padding: 0;}
| |
| − | body {background: #ccc;}
| |
| − |
| |
| − | .slider{
| |
| − | width: 640px; /*Same as width of the large image*/
| |
| − | position: relative;
| |
| − | /*Instead of height we will use padding*/
| |
| − | padding-top: 320px; /*That helps bring the labels down*/
| |
| − |
| |
| − | margin: 100px auto;
| |
| − |
| |
| − | /*Lets add a shadow*/
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Last thing remaining is to add transitions*/
| |
| − | .slider>img{
| |
| − | position: absolute;
| |
| − | left: 0; top: 0;
| |
| − | transition: all 0.5s;
| |
| − | }
| |
| − |
| |
| − | .slider input[name='slide_switch'] {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .slider label {
| |
| − | /*Lets add some spacing for the thumbnails*/
| |
| − | margin: 18px 0 0 18px;
| |
| − |
| |
| − | float: left;
| |
| − | cursor: pointer;
| |
| − | transition: all 0.5s;
| |
| − |
| |
| − | /*Default style = low opacity*/
| |
| − | }
| |
| − |
| |
| − | .slider label img{
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*Time to add the click effects*/
| |
| − | .slider input[name='slide_switch']:checked+label {
| |
| − | border-color: #666;
| |
| − | opacity: 1;
| |
| − | }
| |
| − | /*Clicking any thumbnail now should change its opacity(style)*/
| |
| − | /*Time to work on the main images*/
| |
| − | .slider input[name='slide_switch'] ~ img {
| |
| − | opacity: 0;
| |
| − | transform: scale(1.1);
| |
| − | }
| |
| − | /*That hides all main images at a 110% size
| |
| − | On click the images will be displayed at normal size to complete the effect
| |
| − | */
| |
| − | .slider input[name='slide_switch']:checked+label+img {
| |
| − | opacity: 1;
| |
| − | transform: scale(1);
| |
| − | }
| |
| − | /*Clicking on any thumbnail now should activate the image related to it*/
| |
| − |
| |
| − | /*We are done :)*/
| |
| | </style> | | </style> |
| | </head></html> | | </head></html> |
