how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
Mouse hover effect using css
In web Page, you can set image hover effect using css and you can set hover effect with animation and 3D effects. To create hover effect follow the examples.
The HTML web page, when user mouse hover on a picture and image, which images or pictures you can set a web page static or dynamic then it will display effects. That’s like zoom effect, animation effect, 3D effect etc.
In this tutorial i will show you how to create hover effect of image hover color change and add image description or set links overlay color.
Use this source codes that i will give you in the example. so follow the example
HTML
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="img/slider5.jpg" alt=""> <div class="overlay"> <h2>Hover effect</h2> <a class="info" href="#">Set link here</a> </div> </div> </div>
CSS
.hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background-color: rgba(75,75,75,0.7); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .hovereffect:hover .overlay { background-color: rgba(179, 34, 67, 0.39); } .hovereffect img { display: block; position: relative; } .hovereffect h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.6); -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .hovereffect:hover h2 { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); } .hovereffect a.info { display: inline-block; text-decoration: none; padding: 7px 14px; text-transform: uppercase; color: #fff; border: 1px solid #fff; background-color: transparent; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; font-weight: normal; margin: -52px 0 0 0; padding: 62px 100px; } .hovereffect:hover a.info { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hovereffect a.info:hover { box-shadow: 0 0 5px #fff; }
Related posts