Site URL: http://www.aarontmeehan.com

Hey guys, I am using Custom CSS on my site. Basically what I want is a hover-over effect. So I followed this tutorial:

https://youtu.be/unSOxhzbJY8

It worked well. Except the problem I have is formatting the size. In the tutorial she has 20vw (view width). I don't want a stationary size, I want the image to match the code binding box. So if I have 3 instances of these code boxes next to each other, they don't scale on top of each other, but stay proportional. Basically I want my image size to react exactly like if I used an image box on my site and had no hover over code. I cannot for the life of me get that to work. What in this code would you replace to do that?

#img-hover { 
  background-image: url('image');

     height:19vw;
    width:19vw;
    background-size:contain; 
}

#img-hover:hover {
    background-image: url('image');
}

Hi. Can you describe hover effect? You want when hover image >> the new image will appear?

The hover effect I'm talking about is simply one photo changing into another photo when the mouse is over it. That part I have working using the code above. And she describes how to do it in that youtube video. 

The problem I'm having is the sizing of the photos when using a code box. How does one control the size of the image in a Custom CSS box/block, and have it a scale similar to if were standard image box/block. The images scale with the browser window, but don't stay aligned with the blue code box. When you make the browser window larger, the images get larger and overlap each other. Whereas if you look at the first screenshot below I am using basic image blocks. And they stay aligned with each other, equally distanced apart.  No matter how large the browser window, the images will never grow large enough to overlap, they stay in their block. Thats what I want the images in the code box to do. In the second screenshot, I'm using a code box. Notice how the image isn't bounded to the box.