Muy buenas, la verdad nunca jamás había tenido ese problema al realizar una prueba con efecto hover al desplazar una imagen. Es un ejemplo que realicé bien al comprender tener el efecto hover con bootstrap 4.
Como me sirvió ese efecto, intenté introducir este efecto y empeoró. No sé que debió ser el problema.
Estos son los códigos que implementé:
/*centrar imagen2 + añadir efecto hover*/
.center2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 80% !important;
}
a.negro {
display: inline-block;
background: black;
padding: 0;
position: relative;
}
a.negro img {
display: block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
a.negro:hover:before {
content: '';
display: block;
position: absolute;
width: 70%;
height: 3px;
bottom: 20px;
right: 20px;
background: white;
}
a.negro:hover:after {
content: '';
display: block;
position: absolute;
height: 65%;
width: 3px;
bottom: 20px;
right: 20px;
background: white;
}
a.negro:hover img {
opacity: 0.3;
}
a.negro span {
visibility: hidden;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-height: 100%;
}
a.negro:hover span {
color: #fff;
visibility: visible;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
<!--Función bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Imagen para mostrar -->
<a href="" class="negro"><img src="vintage3.jpg" alt="Cafeteria" class="center2"><span>Cafeteria logo</span></a>
Lo que yo quiero hacer, es centrar la imagen en la página principal que estoy haciendo para que se pueda mostrar bien. Espero sus respuestas al respecto. Saludos.