Joseph Zammit Joseph Zammit - 4 months ago 7
HTML Question

Zooming an image on hovering 2 columns layout

I have 2 columns layout, left column is text and right column an image. What I want to achieve is that when the user hovers over the left column the right column which has a background image will zoom and of course when user hovers over the right column the image zooms as well.

The problem is that when user hover over the left column I want the right column image to zoom as well

Both columns has the same link. I made a js fiddle for this link:
https://jsfiddle.net/jqztf3nv/

Any help would be appreciated.

Thanks

Code

<div id="article-row">
<a title="more" href="http://google.com" target="_blank">
<div class="left-col">
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam quis mollis ante. Ut sapien est, gravida in turpis vitae, accumsan egestas nunc. Etiam porttitor, felis ac lobortis faucibus
</p>
</div>
<div class="article-top zoomimg"></div></a>
</div>


#article-row {
width: 100%;
margin: auto;
}
.left-col {
width: 50%;
float: left;
height: 300px;
}
.zoomimg {
display: inline-block;
width: 100%;
height: 300px;

background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease;
position: relative;
}
.zoomimg:hover {
cursor: pointer;
background-size: 150% 150%;
}
.article-top {
background-image: url(https://static.pexels.com/photos/128442/pexels-photo-128442.jpeg);
float: right;
width: 50%;
height: 300px;
}

.zoomimg:after {
position: absolute;
background-color: rgba(0,0,0,.35);
content: attr(title);
font-family: sans-serif;
padding-top: 250px;
font-size: 2em;
color: #fff;
top: 0;
left: 0;
width: 100%;
height: 300px;
opacity: 0;
transition: opacity .5s linear;
box-sizing: border-box;
}
.zoomimg:hover:after {
opacity: 1;
}

Answer

Only change you need to do is replace this css rule:

.zoomimg:hover {   
    cursor: pointer;
    background-size: 150% 150%;
}

with:

#article-row:hover .zoomimg {
    cursor: pointer;
    background-size: 150% 150%;
}

See your updated fiddle https://jsfiddle.net/jqztf3nv/1/