"Hover effect With Amazing effect"
Bootstrap 4.0.0 Snippet by dhstorm

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <div class="container-fluid"> <div class="title-arch">Our Project<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p></div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 project wow animated animated4 fadeInLeft"> <div class="project-hover"> <h2>TITLE</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p> <a href="#">See Project</a> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 project project-2 wow animated animated3 fadeInLeft"> <div class="project-hover"> <h2>TITLE</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p> <a href="#">See Project</a> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 project project-3 wow animated animated2 fadeInLeft"> <div class="project-hover"> <h2>TITLE</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p> <a href="#">See Project</a> </div> </div> <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 project project-4 wow animated fadeInLeft"> <div class="project-hover"> <h2>TITLE</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p> <a href="#">See Project</a> </div> </div> <div class="clearfix"></div> </div>
.title-arch { text-align: center; margin: 50px 0; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; } .project { width: 100%; height: 500px; background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); background-size: cover; background-position: center; padding: 0 !important; float:left; } .project-2 { background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); } .project-3 { background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); } .project-4 { background-image: url(https://image.freepik.com/free-vector/abstract-geometric-background-design_1045-764.jpg); } .project-hover { width: 100%; height: 100%; color: #fff; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: rgba(186, 232, 2, 0.7); padding: 40% 30px !important; } .project-hover hr { height: 30px; width: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-color: rgba(255, 255, 255, 1); border: 0; } .project-hover a { color: rgba(255, 255, 255, 1); padding: 2px 22px; line-height: 40px; border: 2px solid rgba(255, 255, 255, 1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .project-hover a:hover { border-color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1); background-color: #FFF; } .project:hover .project-hover { opacity: 1; } .project:hover .project-hover hr { width: 100%; height: 5px; }

Related: See More


Questions / Comments:

Sou novato . Alguem por gentileza pode me dar o codigo html ja completo? Obrigado DEUS abençoe

Paulo1966 (1) - 2 days ago - Reply 1


Very beautiful. Can this be taken for a commercial project?

sieugene (-1) - 3 months ago - Reply -1


Yea you can use it.

dhstorm (-2) - 3 months ago - Reply -2


O que eu faço para dar certo o html no meu site, só da erro. Acho que é a linha 4 que não sei mexer e a 1 tambem, Aguem pode me ajudar

paulocesarrrrrrrrrr (0) - 2 days ago - Reply 0


Porque tem erro na 4 linha e não da certo em htm? Sou iniciante, obrigado

paulocesarrrrrrrrrr (0) - 2 days ago - Reply 0


elimine la línea 4º que es el comentario que se usa para describirlo, no afecta el código para que pueda eliminarlo. y no uso español, uso Google translate si lo siento por eso.

dhstorm (-2) - 1 day ago - Reply 0


Por favor como eu incluo isto em html incluir em cima da tag head no meu html ?

Paulo1966 (1) - 3 days ago - Reply 0


no es necesario que incluya la etiqueta HEAD.

solo copie de la línea 7 a 43 y use css y tadaaaa. y mi español es débil así que lo siento

dhstorm (-2) - 1 day ago - Reply 0