WDH: css

<div dir="ltr" style="text-align: left;" trbidi="on"><style>
.all { margin: 0px auto; }
.container { float:left; margin: 10px; }
.container .imgb { display: none; position: absolute; }
.container:hover .imgb { display: block; z-index: 999; }
.clearbyrahul { clear:both; }
</style> <span style="color: #990000; font-size: large;"><b>DEMO:</b></span><br />
<hr /><div class="all"><div class="container"><img class="imga" src="https://d2mdw063ttlqtq.cloudfront.net/files/86270249/Thumbnail.jpg" /> <img class="imgb" src="https://d2mdw063ttlqtq.cloudfront.net/files/86270251/screenshots/00_preview.__large_preview.jpg" /></div><div class="container"><img class="imga" src="https://d2mdw063ttlqtq.cloudfront.net/files/76505202/xthumb.png" /> <img class="imgb" src="https://d2mdw063ttlqtq.cloudfront.net/files/74955771/x-preview.__large_preview.png" /> </div><div class="container"><img class="imga" src="https://d2mdw063ttlqtq.cloudfront.net/files/68409017/thumb.jpg" /> <img class="imgb" src="https://d2mdw063ttlqtq.cloudfront.net/files/53916328/images/1_preview.__large_preview.jpg" /> </div></div><div class="clearbyrahul"></div><br />
<hr /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJlh2aI48UIW4CkscKLBfsHsXylU1qw8OjTOxxXy22WxJY2Rlb-JdBx-QJtWLtx_FjDyAyY4W5g4MPyJqC24LbxVxGVErEQ-E1CCONGwAiQvEreSR_EglCpKdXpoeG8-onA8XIsBfi_M/s1600/hovegallery.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJlh2aI48UIW4CkscKLBfsHsXylU1qw8OjTOxxXy22WxJY2Rlb-JdBx-QJtWLtx_FjDyAyY4W5g4MPyJqC24LbxVxGVErEQ-E1CCONGwAiQvEreSR_EglCpKdXpoeG8-onA8XIsBfi_M/s1600/hovegallery.jpg" width="400" /></a></div><b>For Making this Effect:</b><br />
We have to Defined only four class on CSS as following:<br />
<br />
<b>.container </b>{<br />
float:left;<br />
margin: 10px;<br />
}<br />
<b>.imgb { </b><br />
display: none;<br />
position: absolute;<br />
}<br />
<b>.container:hover .imgb { </b><br />
display: block;<br />
}<br />
<b>.clear { </b><br />
clear:both;<br />
 }<br />
<div><br />
</div><div><b><span style="font-size: large;">Description:</span></b></div><div><b>container:</b><br />
<b></b>We have take attribute of float to left, so that our gallery 's Images will be distributed as a uniform manner.<br />
<b>imgb:</b><br />
This is the big image, which will be display on hover on the above div, So we have defined its attribute to display none, and the position is absolute. so that the image will not take space on pages. and will like a popup effect.<br />
<b>.container:hover .imgb</b><br />
This property is the main point for this. The display of the class <b>imgb </b>is going to block after hovering on class <b>container.</b><br />
<b>clear:</b><br />
This div is made for breaking the flow of content from left i.e.  float:left will be disable after this.<br />
<b><br />
</b></div><b>Now we have to make HTML:</b><br />
<br />
{<br />
<div class="container"><br />
<img src="short-image-url"><br />
<img src="large-image-url" class="imgb"><br />
</div><br />
}<br />
<div class="container"></div><br />
<div><br />
</div><b>Note: </b>Between the { } code you have to write no of times is equal to number of images you have to show on gallery.<br />
<div class="clearbyrahul"></div></div>

Gallery Hover Effect via only CSS

DEMO: For Making this Effect: We have to Defined only four class on CSS as following: .container { float:left; margin: 10px; ...

<div dir="ltr" style="text-align: left;" trbidi="on"><b><span style="color: #660000; font-size: large;">Running Example:</span></b><br />
<div class="moduletable topimg  span12"><div align="center" class="mod-custom mod-custom__topimg" style="background-image: url('images/topimg.jpg');"><input id="h1countvalue" name="h1countvalue" type="hidden" value="1" />  <br />
<h1 class="h1_title" id="h1_title1" style="display: block;">PHP is a server side language.</h1><h1 class="h1_title" id="h1_title2" style="display: none;">JQUERY is a client side language.</h1><h1 class="h1_title" id="h1_title3" style="display: none;">CSS is used for styling attribute to be called at once.</h1><h1 class="h1_title" id="h1_title4" style="display: none;">MYSQL is used for storing the database.</h1></div></div><div dir="ltr" style="text-align: left;" trbidi="on"><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">Here I am describing, how to used Text slider:</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">First we need to define style:</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><b>  .h1_title </b></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">{ font-size: 20px;line-height: 22px;font-family: 'Patua One', cursive;font-weight: normal; text-transform: uppercase; letter-spacing: 4px; color:#e7decf;text-align:<wbr></wbr>center; width:50%;padding-top: 25px;display:none; }</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><b>HTML to be define:</b></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><div class="textslider"></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><input type="hidden" id="h1countvalue" name="h1countvalue" value="1"/></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><span style="white-space: pre-wrap;"></span><h1 class="h1_title" id="h1_title1" style="display:block;">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><span style="white-space: pre-wrap;"></span><h1 class="h1_title" id="h1_title2">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><span style="white-space: pre-wrap;"></span><h1 class="h1_title" id="h1_title3">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><span style="white-space: pre-wrap;"></span><h1 class="h1_title" id="h1_title4">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"></div></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><b>Follwing is the Javascript function:</b></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">function changeh1()</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">{</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">var h1count = $('#h1countvalue').val();</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">var totalh1 = 4;   // define how much h1 we need to show on slider</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">if(h1count<totalh1) { h1count = Number(h1count)+1; } else { h1count=1; }</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">$('.h1_title').css('<wbr></wbr>display','none');</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">$('.h1_title').fadeOut('<wbr></wbr>fast');</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">$('#h1_title'+h1count).<wbr></wbr>fadeIn('slow');</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">$('#h1countvalue').val(<wbr></wbr>h1count);</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">}</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><b>Now we need to call function as a regular Internal:</b></div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">setInterval(function(){<wbr style="background-color: transparent;"></wbr>changeh1()},5000);   // 5000 is equal to 5 Second, It is defined on Miliseconds.  </div><div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;"><br />
</div></div></div>

Text Slider

Running Example: PHP is a server side language. JQUERY is a client side language. CSS is used for styling attribute to be called at once...