Two different image behaviours within the same DIVs

I am currently working on a website for a client, based on a theme called “moderna”, visible here.

As you can see on the link, there is a grey text box that hovers over the slider, and I made it fill the whole width of the image, then I centered the text horizontally in the middle, and I want to add and center a pictogram over each text in this box, as seen here:

http://ge.tt/5mV040L2/v/0

(can’t post images yet, sorry)

The problem that I’m having is that currently the icon doesn’t align to the middle.
I think it’s because of this line of code that makes the background images of the slider the width of the website (responsive):

.flexslider .slides img { width: 100%; display: block;}

When I turn this off, code lines that aim at centering / scaling the icons work perfectly. But of course, I can’t delete or modify this part of the slider’s code, as whenever I do it it stops being responsive or stops being 100% width.

On the HTML side, here’s what I have:

<!-- start slider -->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
<!-- Slider -->
    <div id="main-slider" class="flexslider text-center">
        <ul class="slides">
          <li>
            <img src="img/slides/1.jpg" alt="" />
            <div class="flex-caption">
                <h3><img src="img/slides/residentialservices.png" style="width:70px;height:70px;" />
                <br>Residential Services</h3> 
                <p>Duis fermentum auctor ligula ac malesuada. Mauris et metus odio, in pulvinar urna</p> 
                <a href="#" class="btn-medium btn-theme">Learn More</a>
            </div>
          </li>
          <li>
            <img src="img/slides/2.jpg" alt="" />
            <div class="flex-caption">
                <h3><img src="img/slides/commercialservices.png" style="width:70px;height:70px;" />
                <br>Commercial Services</h3> 
                <p>Sodales neque vitae justo sollicitudin aliquet sit amet diam curabitur sed fermentum.</p> 
                <a href="#" class="btn-medium btn-theme">Learn More</a>
            </div>
          </li>
          <li>
            <img src="img/slides/3.jpg" alt="" />
            <div class="flex-caption">
                <h3><img src="img/slides/gogreenservices.png"  style="width:70px;height:70px;" />
                <br>GoGreen Services</h3> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit donec mer lacinia.</p> 
                <a href="#" class="btn-medium btn-theme">Learn More</a
    </div>
            </div>
          </li>
        </ul>
    </div>
<!-- end slider -->

On the CSS side:

#featured .flexslider {
padding:0;
margin: 50px 0 30px; 
background: #fff; 
position: relative; 
zoom: 1;
}

.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption { bottom: 0px; background-color: rgba(12, 85, 154, 0.8); color: #fff; margin: 0; padding: 25px 25px 25px 30px; position: absolute; right: 0; width: 100%;}
.flex-caption h3 {color: #fff; letter-spacing: 1px; margin-bottom: 8px;}
.flex-caption p {margin: 0 0 15px;}

The .png images are the icons that I want to center.
But if I change the CSS for the images in this div, the slider image changes as well.
I’ve been able to get the icon to be in the center with the slider not full-width, or have the slider’s background image work fine, but the icons are full width (so, very huge) or just aligned to the very left of the text frame.

I haven’t been able to add a div to the icons without breaking the appearance.

I am wondering how to code this so that these two images in the same div can behave / display differently, and yet not cancel out each other’s features / appearance. Thanks!


Source: css

Leave a Reply