<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="contenedor"> Efecto Brillo con CSS3 <div class="conte_imagen"> <img src="https://lh3.googleusercontent.com/-VpplI1o__1c/UXQBmto1SFI/AAAAAAAAFdg/Dl0LwQafi9o/s278/anuncio.jpg" /> <div class="activa_hover"></div> </div> <div>

.contenedor { width: 278px; margin: 20px; color: #000406; font: italic 18px Georgia; text-align: center; } .conte_imagen{ width: 278px; height: 231px; margin: 30px auto; position: relative; border:4px solid #999; } .activa_hover{ width:100%; height: 100%; background-image: url(https://lh3.googleusercontent.com/-vxQwquqFF0w/UXP-87VRPyI/AAAAAAAAFdM/g8PlNuj5oXg/s500/brillo.png); position: absolute; /*posicion de la imagen*/ background-position: -265px 0; left:0px; top:0px; background-repeat:no-repeat; /*comenzamos transicion*/ -webkit-transition: background-position .3s ease; -moz-transition: background-position .3s ease; -o-transition: background-position .3s ease; transition: background-position .3s ease; } .activa_hover:hover{ /*posicion hover de la imagen*/ background-position: 160px 0; }