Can’t Get Images with Overlay to Display on Same Row

Hi,

Up all night and at my wit’s end…

https://launchsearchpartners.com/clients

Currently I’m using Shortcodes Unlimited to create the columns and the image with overlay code is in each. I tried using the themes built-in column support, but had similar problems. I think the problem is in the code that displays the pictures and overlays.

Here’s the CSS that creates the image with overlay:

/*The CSS for the image and the container element.*/
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 250px;
}

.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

/*The CSS to style and animate the overlay.*/
.box .overbox {
background-color: #304562;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 250px;
height: 250px;
padding: 0px 0px 0px 0px;
}

.box:hover .overbox { opacity: 1; }

/*The CSS to style and animate text captions.*/
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}

.box .title {
font-size: 1.6em;
line-height: 2em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}

.box .tagline {
font-size: 0.8em;
line-height: 1em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}

.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}

As you can guess, I am not an expert. I have a meeting with someone regarding this shortly and I really need some help!

Thanks!!!

• This topic was modified 8 years, 4 months ago by cybernicco. Reason: Mistake