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.