I have a row of options which are checkbox and an image.. I'd like it when the user selects the image or the checkbox that it highlights the image with a border or whatever.. can I achieve this with pure css?
here's a snipet
<style>
.highlight {
opacity: 0.7;
}
.highlight:hover {
opacity: 1;
}
</style>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="checkbox" name="question_1_1" value="1" style="
/* display: none !important; */"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1a.png" alt="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="checkbox" name="question_1_2" value="1" style="
/* display: none !important; */"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1b.png" alt="" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
You mean like this? you can use the css adjacent sibling selector
.highlight {
opacity: 0.7;
}
.highlight:hover {
opacity: 1;
}
.wpProQuiz_questionInput:checked + img {
border: 1px solid #f00;
}
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label for="1">
<input id="1" class="wpProQuiz_questionInput" type="checkbox" name="question_1_1" value="1"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1a.png" alt="pic1" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
<li class="wpProQuiz_questionListItem" data-pos="0">
<span style="display:none;">1. </span>
<label for="2">
<input id="2" class="wpProQuiz_questionInput" type="checkbox" name="question_1_2" value="1"> <img src="http://www.iq-tests.co/wp-content/uploads/2018/09/1b.png" alt="pic2" width="10%" height="10%" class="alignnone size-medium wp-image-594"></label>
</li>
If you want give effect on click then you have to use:
.highlight:active,.highlight:focus {
border:1px solid red;
}
Related
I am trying to build a interactive email content block that would show or hide content based on the selection. It worked before I tried to customize the label. It stopped working after I wrapped the input and label inside a div. I think it could be throwing my selectors off but I am not sure how remedy the problem.
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#red + label span {
background-color: red;
}
.custom-radios input[type="radio"]#blue + label span {
background-color: blue;
}
.custom-radios input[type="radio"]#green + label span {
background-color: green;
}
.custom-radios input[type="radio"]#orange + label span {
background-color: orange;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
#red{
display: none
}
#blue{
display: none
}
#green{
display: none
}
#orange{
display: none
}
input[type="red"]:checked ~ #red {
display: block
}
input[value="blue"]:checked ~ #blue {
display: block;
}
input[value="green"]:checked ~ #green {
display: block;
}
input[value="orange"]:checked ~ #orange {
display: block;
}
<div class="custom-radios">
<div>
<input type="radio" id="red" name="color" value="red">
<label for="red">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="green" name="color" value="green">
<label for="green">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="orange" name="color" value="orange">
<label for="orange">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="green">
<img src="https://via.placeholder.com/580x200/00FF00/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="orange">
<img src="https://via.placeholder.com/580x200/FFA500/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
</div>
I think selectors may be a weak point for you, again, I encourage you to check the CSS Selectors Reference from w3school.
Anyways, I made a simplified version, as similar as I could to you current structure, so you can see it working.
.hidden_input {
display: none;
}
#red_input+label>span {
background-color: red;
}
#blue_input+label>span {
background-color: blue;
}
label>span>img {
opacity: 0;
transition: all 0.3s ease;
}
.hidden_input:checked+label>span>img {
opacity: 1;
}
#red_content,
#blue_content {
display: none;
}
#red_input:checked~#red_content,
#blue_input:checked~#blue_content {
display: block;
}
<div class="custom-radios">
<input type="radio" id="red_input" class="hidden_input" name="color" value="red">
<label for="red_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<input type="radio" id="blue_input" class="hidden_input" name="color" value="blue">
<label for="blue_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red_content">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue_content">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
</div>
You can also play and place elements wherever you want in your HTML code, and then set their position with grid (it's just another option).
I have two custom radio button , I have added a custom tick when clicked to be checked [tick], but when I clcik the second button the first radio button still checked .
here is jsfiddle: http://jsfiddle.net/03vwco7r/
here is html :
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</label>
</p>
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
<a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
{l s='Pay with PayU' mod='payu'}
</a>
</label>
</p>
Here is css
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-block;
cursor: pointer;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
position: relative;
border: 1px solid #000;
border-radius:50px;
width: 60px;
height: 60px;
margin:0;
}
input[type="radio"]:checked + label:before {
content: "✔";
font-family: 'lucida grande';
font-size: 45px;
line-height: 60px;
text-align: center;
}
I want whena user click the second button the first button sholud be automatically unchecked,
What am I doing wrong in my code?
Because they have same "id" and "for" ,You should change "id" and "for" in second radio style:
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</label>
</p>
<p class="payment_module">
<input id="session2" name="radio-group" type="radio" />
<label for="session2">
<img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
<a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
{l s='Pay with PayU' mod='payu'}
</a>
</label>
</p>
session1 ===> session2
I am writing a blog post for a friend of mine, on the ghost platform. This blog post is going to be a very long post about multiple different objects, each requiring their own image slider. I'd like to re-use the same CSS for all 20 or so sliders on the page, only changing the html.
I followed a slider tutorial online, that created a html/css only slider, as Ghost doesnt support scripting in their individual blog posts.
Unfortunately, when i click on one thumbnail, the image in all the other sliders disapears, and is only shown in that particular slider, making scrolling down the page a very boring experience.
Anyone able to spot the error? Here is an excerpt using only two sliders. take a look at the result further down:
<style>
* {margin: 0; padding: 0;}
body {background: #ccc;}
.slider{
width: 640px;
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.2s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider label img{
display: block;
}
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
</style>
**The xx: **
Insert image
About
Gallery of the xx
<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
<input type="radio" name="slide_switch" id="id2"/>
<label for="id2">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
**The yy**
Insert image
About
Gallery of the yy
<div class="slider">
<input type="radio" name="slide_switch" id="id6"/>
<label for="id6">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
<input type="radio" name="slide_switch" id="id7"/>
<label for="id7">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
<input type="radio" name="slide_switch" id="id8"/>
<label for="id8">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
<input type="radio" name="slide_switch" id="id9"/>
<label for="id9">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
<input type="radio" name="slide_switch" id="id10"/>
<label for="id10">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
All of your radio buttons have the same name, so they're all considered a part of the same group. Only one radio button can be active in any one group. Each group should have a different name so they are grouped separately. Doing so will affect your current CSS but changing your attribute selector from name= to name^= or name*= will allow you to give each radio button set a different name. In the example below, we appended _1 to the second set.
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
}
.slider {
width: 640px;
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
position: absolute;
left: 0;
top: 0;
transition: all 0.2s;
}
.slider input[name^='slide_switch'] {
display: none;
}
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider label img {
display: block;
}
.slider input[name^='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name^='slide_switch']~img {
opacity: 0;
transform: scale(1.1);
}
.slider input[name^='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
<div class="slider">
<input type="radio" name="slide_switch_1" id="id1" checked>
<label for="id1">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
<input type="radio" name="slide_switch_1" id="id2">
<label for="id2">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg">
<input type="radio" name="slide_switch_1" id="id3">
<label for="id3">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
<input type="radio" name="slide_switch_1" id="id4">
<label for="id4">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg">
<input type="radio" name="slide_switch_1" id="id5">
<label for="id5">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg">
</div>
<div class="slider">
<input type="radio" name="slide_switch" id="id6" checked>
<label for="id6">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
<input type="radio" name="slide_switch" id="id7">
<label for="id7">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg">
<input type="radio" name="slide_switch" id="id8">
<label for="id8">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
<input type="radio" name="slide_switch" id="id9">
<label for="id9">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg">
<input type="radio" name="slide_switch" id="id10">
<label for="id10">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100">
</label>
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg">
</div>
I have radio button input with label, however I cannot align them horizontally, it just appeared one by one vertically, how can I make it align one by one horizontally.
<div class="cc-selector-2" align="right">
{{range $index,$url := .Avatars}}
<label for="pic1">
<input type="radio" name="avatar" id={{$url}} value={{$url}} />
<img src={{$url}} alt="" height="40" width="40"/>
</label>
{{end}}
</div>
<style>
.cc-selector-2 input{
position:absolute;
z-index:999;
}
label {
display: block;
text-align: center;
margin-bottom:0px;
font-size: .85em;
background-color:buttonface;
}
</style>
Just play with display: inline-block ;)
cc-selector-2{
text-align: center;
}
label {
display: inline-block;
margin:auto;
font-size: .85em;
background-color:buttonface;
}
input {
margin: 0;
}
<div class="cc-selector-2" align="right">
<label for="pic1">
<input type="radio" name="avatar" id={{$url}} value={{$url}} />
<img src={{$url}} alt="" height="40" width="40"/>
</label>
<label for="pic1">
<input type="radio" name="avatar" id={{$url}} value={{$url}} />
<img src={{$url}} alt="" height="40" width="40"/>
</label>
</div>
Let me start off by stating I'm an absolute noob at webdesign and I mostly just use it for my game art portfolio. I'm somewhat familiar with HTML and CSS3 but that's where my coding skill pretty much end abrubtly.
I wanted a nice simple slider with thumbnails for my portfolio, and I found this one online and it seems to work for me for the most part.
I want to be able to duplicate this slider on my web page so I can dedicate an entire slider for each project I have and fill it with images.
However this slider doesn't allow me to do that. When I duplicate it, it only displays 1 main image corresponding to the clicked thumbnail at a time.
Here's the HTML:
<div id="project2">
<!-- Project slider -->
<div class="p-slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="images/content/3D/turtleneck_staf_2.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_2.jpg"/>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="images/content/3D/turtleneck_staf_1.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_1.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="images/content/3D/turtleneck_staf_3.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_3.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="images/content/3D/turtleneck_staf_4.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_4.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="images/content/3D/turtleneck_staf_5.jpg"/>
</label>
<img src="images/content/3D/turtleneck_staf_5.jpg"/>
</div>
</div>
<div id="project3">
<!-- Project slider -->
<div class="p-slider">
<input type="radio" name="slide_switch" id="id6"/>
<label for="id6">
<img src="images/content/3D/keep_it_low_poly_2.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_2.jpg"/>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id7" checked="checked"/>
<label for="id7">
<img src="images/content/3D/keep_it_low_poly_1.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_1.jpg"/>
<input type="radio" name="slide_switch" id="id8"/>
<label for="id8">
<img src="images/content/3D/keep_it_low_poly_3.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_3.jpg"/>
<input type="radio" name="slide_switch" id="id9"/>
<label for="id9">
<img src="images/content/3D/keep_it_low_poly_4.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_4.jpg"/>
<input type="radio" name="slide_switch" id="id10"/>
<label for="id10">
<img src="images/content/3D/keep_it_low_poly_5.jpg"/>
</label>
<img src="images/content/3D/keep_it_low_poly_5.jpg"/>
</div>
</div>
Each slider is embedded in its own "project" div because I wanted to have each project to have a slightly different background color.
Then I ofcourse also have a CSS sheet that both sliders are linked to:
.p-slider{
width: 83%;
position: relative;
padding-top: 41.8%;
margin: 20px auto;
margin-bottom: 150px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.content .p-slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
width:100%;
}
.p-slider input[name='slide_switch'] {
display: none;
}
.p-slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.p-slider label img{
display: block;
width: 200px;
}
.p-slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.p-slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
.p-slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
#media screen and (max-width: 800px) {
.p-slider label img{
/*display: block;*/
width: 100px;
}
}
Try to ignore the funky percentages, that's because the images I was using have a weird aspect ratio (1920 x 966), more on that below.
So that's the first problem. I have 2 sliders, and at any time when I click a thumbnail only 1 of them will display a main image. I want to be able to copy it dozens of times and have each slider display a corresponding main image.
My second problem is that fact that this slider wasn't really responsive when I found it. I partially solved it by using percentages instead of pixels, but I don't really know how to apply this to the thumbnails.
The web page needs to be able to be viewed on mobile devices aswell, thus this is an important feature.
And yes I realize that there are probably better and smarter ways of creating a responsive CSS slider, but like I said, I'm a total noob. This works for me.
You can't use same name "slide_switch" for all inputs. It groups them together, so only one of them could be checked. You have to use different name for every project.
<div class="slider-wrapper">
<ul class="s-thumbs">
<li><img src="img/thumb1.png" alt="" /><span>Image 1</span></li>
<li><img src="img/thumb2.png" alt="" /><span>Image 2</span></li>
<li><img src="img/thumb3.png" alt="" /><span>Image 3</span></li>
<li><img src="img/thumb4.png" alt="" /><span>Image 4</span></li>
<li><img src="img/thumb5.png" alt="" /><span>Image 5</span></li>
<li><img src="img/thumb6.png" alt="" /><span>Image 6</span></li>
<li><img src="img/thumb7.png" alt="" /><span>Image 7</span></li>
</ul>
</div><ul class="s-slides">
<li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
<li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
<li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
<li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
<li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
<li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>
I only give you HTML code & in this link you can check CSS code. So by using css you can make slide or you can change as you want.
Please check this link:-http://designmodo.com/slider-css3/ & https://www.sanwebe.com/2012/08/pure-css3-tutorials-examples