1

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. Ejemplo2

Como me sirvió ese efecto, intenté introducir este efecto y empeoró. No sé que debió ser el problema.

Imagen principal empeorado

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.

3
  • ¿Cómo la quieres centrar: verticalmente, horizontalmente o ambas y que la imagen se situé en el medio de la página? el 6 jun. 2019 a las 18:27
  • @FranciscoRomero la imagen en el medio de la página
    – Baku84
    el 6 jun. 2019 a las 19:13
  • lo más importante, que la imagen quede sin background color, pero cuando trato de cambiarla, empeora un poco más por el problema de la transparencia (cada vez que cambio color, la transparencia toma el background color literalmente)
    – Baku84
    el 6 jun. 2019 a las 19:17

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.