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>