Could someone help me achieve a 2-column layout where the left column contains text and the right column an image? I want the image in the right column to zoom when the user hovers over either the left or right column.
The issue is that when the user hovers over the left column, I also want the image in the right column to zoom as well.
Both columns should have the same link. Here's a js fiddle with the code: https://jsfiddle.net/jqztf3nv/
Any assistance would be greatly appreciated.
Thank you
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;
}