October 27, 2015

Weebly Tricks #98 - CSS3 Sliding Image Effects

Posted by Domz at 10/27/2015



Here is another simple yet amazing slideshow that we can add on your site. Using only CSS3, we can create a beautiful image effects with 4 styles but I'm gonna show only one for this time. Thanks to Codrops, you better check it out.








CSS CODE


.cr-container{
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
border: 20px solid #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
font-style: italic;
width: 150px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float:left;
position: relative;
margin-top:350px;
z-index: 1000;
  text-align: center;
}
.cr-container label:before{
content:'';
width: 34px;
height: 34px;
background: rgba(130,195,217,0.9);
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}
.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
position: absolute;
bottom: -20px;
right: 0px;
}
.cr-container label.cr-label-img-4:after{
width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #fff;
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
display: none;
}
.cr-bgimg{
width: 600px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.cr-bgimg{
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 400px;
left: 0px;
z-index: 2;
text-indent: -9000px;
}
.cr-bgimg div:nth-child(even) span{
top: -400px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip4.jpg);
}
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}

.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation: slideOutUp 0.6s ease-in-out;
-moz-animation: slideOutUp 0.6s ease-in-out;
-o-animation: slideOutUp 0.6s ease-in-out ;
-ms-animation: slideOutUp 0.6s ease-in-out;
animation: slideOutUp 0.6s ease-in-out;
}
.cr-container input:checked ~ .cr-bgimg div:nth-child(even) span{
-webkit-animation: slideOutDown 0.6s ease-in-out;
-moz-animation: slideOutDown 0.6s ease-in-out;
-o-animation: slideOutDown 0.6s ease-in-out;
-ms-animation: slideOutDown 0.6s ease-in-out;
animation: slideOutDown 0.6s ease-in-out;
}
@-webkit-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-webkit-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-moz-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-moz-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-o-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-o-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-ms-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-ms-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4){
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
top: 0px;
z-index: 10;
}
.cr-titles h3{
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
z-index: 10000;
position: absolute;
width: 100%;
left: 0px;
text-align: center;
opacity: 0;
}
.cr-titles h3 span:nth-child(1){
top: 15%;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 70px;
letter-spacing: 7px;
-webkit-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2){
top: 50%;
margin-top: 84px;
letter-spacing: 0px;
background: rgba(104,171,194,0.9);
font-size: 14px;
padding: 10px 0px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
opacity: 1;
top: 50%;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
.cr-container input{
display: inline;
width: 24%;
margin-top: 350px;
z-index: 1000;
position: relative;
}
.cr-container label{
display: none;
}
}



HTML CODE


<section class="cr-container">

<!-- radio buttons and labels -->
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>

<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>

<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>

<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>

<div class="clr"></div>

<!-- panels -->
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>

<!-- titles -->
<div class="cr-titles">
<h3>
<span>Serendipity</span>
<span>What you've been dreaming of</span>
</h3>
<h3>
<span>Adventure</span>
<span>Where the fun begins</span>
</h3>
<h3>
<span>Nature</span>
<span>Unforgettable eperiences</span>
</h3>
<h3>
<span>Serenity</span>
<span>When silence touches nature</span>
</h3>
</div>

</section>


CONCLUSION





You only need 4 good and relevant photos and you're good to go. You may also check the other three styles on Codrops.

Do you want me to add this on your site? Click THIS PAGE and I'll be glad to help.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

2 comments:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top