3

Estoy realizando un trabajo web y resulta que me están pidiendo para la siguiente sección que es la que dice viaja por argentina con las 4 imagenes full lo siguiente:

Cajas de fotos, el hover de la foto, debe afectar al titulo y cambiarlo de color (sacar el underline). Asimismo si selecciono el titulo debe hacer el mismo efecto de zoom en la imagen.

El problema es que no se como resolverlo si debería partir de algún script o si es por css, adjunto el codigo que realice de la seccion

    $('.caja-beneficios').find('.img-1').hover( 
function(){ 
$(this).closest('.caja-beneficios').find('figcaption').find('a').addClass('onImgHover'); },
function() { $(this).closest('.caja-beneficios').find('figcaption').find('a').removeClass('onImgHover'); } ) 

$('.caja-beneficios').find('figcaption').find('a').hover( function(){ 
$(this).closest('.caja-beneficios').find('.img-1').addClass('onTituloHover'); }, 
function() { $(this).closest('.caja-beneficios').find('.img-1').removeClass('onTituloHover'); } )
.caja-beneficios:hover .img-1{
  transform:scale(1.2);
}

.uno:hover .img-2{
  transform:scale(1.2);
}
.dos:hover .img-2{
  transform:scale(1.2);
}
.caja-novedades-2:hover .img-3{
  transform:scale(1.2);
} 
 

img.onTituloHover {
 transform: scale(1.2);
}
a.onImgHover {
  text-shadow: 0px 0px 5px!important;
  color: red!important
} 


#beneficios-novedades {
  height: 439px;
}

#beneficios-novedades .caja-beneficios {
  width: 50%;
  height: 439px;
  padding: 0;
  float: left;
  position: relative;
}

#beneficios-novedades .caja-novedades {
  width: 25.6%;
  height: 439px;
  padding: 0;
  float: left;
  position: relative;
}

#beneficios-novedades .caja-novedades-2 {
  width: 22%;
  height: 439px;
  padding: 0;
  float: left;
  position: relative;
}

#beneficios-novedades .left .bg-foto-1 {
  right: 0;
  height: 439px;
  position: absolute;
  top: 0;
  width: 51vw;
  z-index: 24;
  background-size: cover;
  background-position: center;
}

#beneficios-novedades .right .bg-foto-2 {
  background-color: red;
  left: 0;
  height: 439px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 24;
}

#beneficios-novedades .right .bg-foto-3 {
  background-color: blue;
  left: 0;
  height: 439px;
  position: absolute;
  top: 0;
  width: 40vw;
  z-index: 24;
  background-size: cover;
  background-position: center;
}


/*-----------------------------------------------*/

#beneficios-novedades .caja-beneficios .beneficios {
  position: absolute;
  z-index: 99;
  width: 500px;
  padding: 25px 0px;
}

#beneficios-novedades .caja-beneficios .beneficios span {
  font-size: 12px;
  color: #000000;
  background-color: #ffd100;
  border-radius: 10px;
  padding: 4px 12px;
  text-transform: uppercase;
  margin-right: 15px;
  text-decoration: none;
}

#beneficios-novedades .caja-beneficios .beneficios a {
  position: absolute;
  color: #fff;
  width: 400px;
  font-weight: bold;
  top: 353px;
  text-align: left;
  left: 0px;
  font-size: 30px;
  line-height: 33px;
}


/*-------------------------------------------------------*/

#beneficios-novedades .caja-novedades .novedades {
  position: absolute;
  z-index: 99;
  padding: 25px 18px;
}

#beneficios-novedades .caja-novedades .novedades span {
  left: 17px;
  top: 0;
  font-size: 12px;
  color: #000000;
  background-color: #ffd100;
  border-radius: 10px;
  padding: 3px 12px;
  text-transform: uppercase;
  margin-right: 15px;
  margin-top: 17px;
  text-decoration: none;
}

#beneficios-novedades .caja-novedades .novedades a {
  position: absolute;
  width: 100%;
  left: 17px;
  color: #fff;
  font-size: 21px;
  width: 218px;
  top: 140px;
  font-weight: bold;
}

#beneficios-novedades .caja-novedades .clientes span {
  position: absolute;
  left: 17px;
  top: 220px;
  font-size: 12px;
  color: #000000;
  background-color: #ffd100;
  border-radius: 10px;
  padding: 3px 12px;
  text-transform: uppercase;
  margin-right: 15px;
  margin-top: 17px;
  text-decoration: none;
}

#beneficios-novedades .caja-novedades .clientes a {
  position: absolute;
  width: 100%;
  left: 17px;
  color: #fff;
  font-size: 21px;
  width: 238px;
  bottom: 16px;
  font-weight: bold;
}

#beneficios-novedades .caja-novedades-2 .beneficios-2 {
  position: absolute;
  z-index: 31;
  padding: 25px 18px;
}

#beneficios-novedades .caja-novedades-2 .beneficios-2 span {
  font-size: 12px;
  color: #000000;
  background-color: #ffd100;
  border-radius: 10px;
  padding: 4px 12px;
  text-transform: uppercase;
  margin-right: 15px;
  text-decoration: none;
}

#beneficios-novedades .caja-novedades-2 .beneficios-2 a {
  position: absolute;
  bottom: 0;
  color: #fff;
  width: 250px;
  font-size: 21px;
  font-weight: bold;
  top: 363px;
  left: 28px;
}
figure.snip1281 {
  overflow: hidden;
    min-width: 100%;
    max-height: 700px;
    width: 100%;
    background-color: #000000;
    max-width: 100%;
    height: 441px;
}
figure.snip1281 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1281 img {
  opacity: 0.7;
  max-width: 100%;
  min-height: 100%;
}
figure.snip1281:after {

  width: 0;
  height: 6px;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1281 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

figure.snip1281:hover img,
figure.snip1281.hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure.snip1281:hover:after,
figure.snip1281.hover:after {
  width: 100%;
}

/*segunda columna*/

figure.snip1280 {
  color: #fff;
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    background-color: #000000;
    color: #ffffff;
}
figure.snip1280 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1280 img {
  opacity: 0.7;
  max-width: 300px;
  min-height: 100%;
}
figure.snip1280:after {
  width: 0;
  height: 6px;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1280 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}


figure.snip1280:hover img,
figure.snip1280.hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure.snip1280:hover:after,
figure.snip1280.hover:after {
  width: 100%;
}


/*tercer columna*/

figure.snip1283 {
  overflow: hidden;
  min-width: 100%;
  max-height: 439px;
  width: 100%;
  background-color: #000000;
}
figure.snip1283 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1283 img {
  opacity: 0.7;
  max-width: 100%;
  /*width: 100%;*/
  min-width: 455px;
}
figure.snip1283:after {
  width: 0;
  height: 6px;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1283 figcaption {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  padding: 0 30px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
figure.snip1283 h2,
figure.snip1283 span {
  margin: 0;
  width: 100%;
}
figure.snip1283 h2 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
  top: 318px;
}
figure.snip1283 span {
    font-size: 12px;
    color: #000000;
    background-color: #ffd100;
    border-radius: 10px;
    padding: 4px 12px;
    text-transform: uppercase;
    margin-right: 15px;
    text-decoration: none;
}
figure.snip1283 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1283:hover img,
figure.snip1283.hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure.snip1283:hover:after,
figure.snip1283.hover:after {
  width: 100%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section>
  <div class="container-fluid hidden-xs hidden-sm" style="padding: 0">
    <div class="container" id="beneficios-novedades">
      <div class="row">
        <!-- 1 COLUMNAS -->
        <div class=" caja-beneficios left">
          <div class="bg-foto-1">
            <div class="imagen-destacada">
              <figure class="snip1281 yellow">
                <img class="img-responsive img-1" src="http://qkstudiodemo.com/pagofacil/v3/images/imagen-beneficios.jpg">
              </figure>
            </div>
          </div>

          <div>
            <figcaption class="beneficios">
              <span>Beneficios</span>
              <a href="#">¡Viajá por Argentina junto a Pago Fácil!</a>
            </figcaption>
          </div>
        </div>

        <!-- 2 COLUMNAS -->
        <div class=" caja-novedades sin-padding right">
          <div class="bg-foto-2">
            <div class="imagen-destacada-medio">
<a href="" title="">
              <figure class="snip1280 red hover">
                <img class="img-responsive" src="http://qkstudiodemo.com/pagofacil/v3/images/imagen-novedades.jpg">
              </figure>
</a>
            </div>

            <div>
              <figcaption class="novedades">
                <span>NOVEDADES</span>
                <a href="#">¡Realizá operaciones desde tu celular!</a>
              </figcaption>
            </div>

            <div class="imagen-destacada-medio">
<a href="#">
              <figure class="snip1280 red hover">
                <img class="img-responsive" src="http://qkstudiodemo.com/pagofacil/v3/images/imagen-soy-cliente.jpg">
              </figure>
</a>
            </div>

            <div>
              <figcaption class="clientes">
                <span>SOY CLIENTE</span>
                <a href="#">¡Descuentos exclusivos!</a>
              </figcaption>
            </div>
          </div>
        </div>

        <!-- 3 COLUMNAS -->
        <div class="caja-novedades-2 right">
          <div class="bg-foto-3">
            <div class="imagen-destacada">
              <figure class="snip1283 yellow">
                <img class="img-responsive" src="http://qkstudiodemo.com/pagofacil/v3/images/imagen-novedades-2.jpg">
              </figure>
            </div>
          </div>

          <div>
            <figcaption class="beneficios-2">
              <span>Beneficios</span>
              <a href="#">Pagá tu cuota de autoahorro Volskwagen</a>
            </figcaption>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2
  • 2
    Yo veo que aparece el underline y se realiza el zoom cuando pasas por las imágenes... ¿que problema tienes realmente? Commented el 3 abr. 2018 a las 20:47
  • Que cuando pasas el mouse encima de la tipografía tiene aplicarse el efecto que cuando pasas el mouse por la imagen y por otro lado cuando pasas el mouse por encima de la imagen la tipografía deberia hacer algún efecto de hover cambiando de color algo de eso. se comprende?
    – MarianoF
    Commented el 3 abr. 2018 a las 21:34

1 respuesta 1

3

En el caso que quieras hacer que se cambie el estilo de ambos al hacer hover en uno o en otro esto se resuelve con css y a quien debes aplicarle el hover es al contenedor de la imagen y del título. Por otro lado si lo que quieres es cambiar el estilo de un elemento al hacer hover en otro, esto es solo posible por medio de javascript (en este caso utilice jQuery), aquí te muestro ambas soluciones:

// este código es para resolver el caso en que quieres cambiar un elemento al hacer hover en otro
$('.contenedor1').find('img').hover(
  function(){
    $(this).parent().find('.titulo').addClass('onImgHover');
  }, 
  function() {
    $(this).parent().find('.titulo').removeClass('onImgHover');
  }
)

$('.contenedor1').find('.titulo').hover(
  function(){
    $(this).parent().find('img').addClass('onTituloHover');
  }, 
  function() {
    $(this).parent().find('img').removeClass('onTituloHover');
  }
)
.contenedor{
  position:relative;
}
.titulo{
  position:absolute;
  color:white;
  z-index:1;
}

.contenedor:hover img{
  transform:scale(1.2);
}

.contenedor:hover .titulo{
  text-decoration: underline;
}

img.onTituloHover {
 transform: scale(1.2);
}
.titulo.onImgHover {
  text-shadow: 0px 0px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Ejemplo al hacer "hover" sobre contenedor se cambia el estilo de ambos (solo css)
<div class="contenedor">
  <a class="titulo" >titulo de ejemplo</a>
  <img class="" src="https://1.bp.blogspot.com/-JREhSKN8sMM/VmH2B-jmFXI/AAAAAAAAIzg/ScNtA185M88/s1600/02273%2Bpaisajes01.jpg" />
</div>

ejemplo al hacer "hover" sobre un elemento se cambia el otro (jQuery)
<div class="contenedor1">
  <a class="titulo" >titulo de ejemplo</a>
  <img class="" src="https://1.bp.blogspot.com/-JREhSKN8sMM/VmH2B-jmFXI/AAAAAAAAIzg/ScNtA185M88/s1600/02273%2Bpaisajes01.jpg" />
</div>

18
  • Hola, Que cuando paso el mouse por arriba de la tipografía tiene aplicarse el efecto que cuando pasas el mouse por la imagen y por otro lado cuand pasas el mouse por la imagen la tipografia haga algun efecto de hover cambiando de color algo de eso. se comprende?
    – MarianoF
    Commented el 3 abr. 2018 a las 21:35
  • entonces lo que tu quieres es que cuando pases por uno de los dos afectas la otra sin afectar la por la que estas pasando?
    – LPZadkiel
    Commented el 3 abr. 2018 a las 21:37
  • Claro! vos viste que cuando pasas por encima de la tipografia el efecto de acercamiento no se aplica. Sino que se produce cuando estas encima de la imagen. Por otro lado me pide que cuando uno se encima sobre la imagen el texto haga algo no se! que cambie de color por ejemplo
    – MarianoF
    Commented el 3 abr. 2018 a las 21:40
  • pero no te piden que hagas ambos al mismo tiempo?
    – LPZadkiel
    Commented el 3 abr. 2018 a las 21:42
  • Si podria ser! La idea es esa que cuando te pongas encima del texto se aplique tanto el efecto que hace la imagen como tambien por ahi que tengo un hover de color. y Lo mismo para la imagen que cuando te encimes sobre la imagen se aplique ese zoom que tiene y que el texto cambie de color.
    – MarianoF
    Commented el 3 abr. 2018 a las 21:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.