asked on

Place text over image using CSS

Good day,

I have inherited the below CSS and I am not proficient in CSS.

I would like to place a text over an image while keeping the image visible when hovering. With the current HTML and CSS below, the text-block completely superimposes on the picture. Our requirement is for the image to become transparent while showing the text.

Is this possible ?

HTML
=====

<html>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <div class="w3l_banner_nav_right">
    <div class="w3l_banner_nav_right_banner5">
        <h3>Best Deals For New Products<span class="blink_me"></span></h3>
    </div>
    <div class="w3l_banner_nav_right_banner3_btm">
    <div class="col-md-4 w3l_banner_nav_right_banner3_btml">
        <div class="view view-tenth">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt=" " class="img-responsive" height="75" width="75" />
            <div class="mask">
                <h4>Grocery Store xx</h4>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
        </div>
        <h4>Fruits & Vegetables</h4>
        <ol>
            <li>sunt in culpa qui officia</li>
            <li>commodo consequat</li>
            <li>sed do eiusmod tempor incididunt</li>
        </ol>
    </div>
    <div class="col-md-4 w3l_banner_nav_right_banner3_btml">
        <div class="view view-tenth">
            <img src="http://pngimg.com/upload/duck_PNG5011.png" alt=" " class="img-responsive" height="75" width="75"/>
            <div class="mask">
                <h4>Grocery Store</h4>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</html>

Open in new window

CSS
===

.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
	background-color: #09338c;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    width: 100%;
    height: 100%;
}
.view-tenth h4 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth p {
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth:hover img,.w3l_banner_nav_right_banner3_btml:hover .view-tenth img{
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth:hover .mask,.w3l_banner_nav_right_banner3_btml:hover .view-tenth .mask{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h4,.view-tenth:hover p,.w3l_banner_nav_right_banner3_btml:hover .view-tenth h4,.w3l_banner_nav_right_banner3_btml:hover .view-tenth p{
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=5)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view {
   overflow: hidden;
   position: relative;
   text-align: center;
}
.view .mask,.view .content {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
   margin: 0 auto;
}
.view h4 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin:5em 0 0;
}
.view p {
	font-style: italic;
    font-size: 14px;
    position: relative;
    color: #fff;
    padding: 10px 45px 0px;
    text-align: center;
    line-height: 1.8em;
}

Open in new window

Julian Hansen

I added code tags to your post.

Can you give us a screen shot or similar of the effect you are trying to achieve?

lenamtl

I'm using this simple code
https://jsfiddle.net/lenamtl/5o05745k/

Let me know if you have any question

Julian Hansen

I understand that part - but I want to understand it in the context of your code. You have small images and a large amount of text - how do you want that to be laid out.

Member_2_248744

greetings Errol Farro, , I looked at your HTML and the CSS that you posted, , But I had difficulty trying to understand some of the ways the <div> the <img> and the <h4> are used in this arrangemant?
Also the CSS used was not easy to figure out, and seemed like alot of effort was used to build it, to get some special effects for HOVER OVER with Scale and Transparency (opacity) in CSS transitions.

in the Image tags it used the old style and now out of date width and height attributes as -
<img src="http://image.png" class="img-responsive" height="75" width="75"/>
then this image has has the -
class="img-responsive"
which to me makes the width and height attributes seem unnecessary (maybe incorrect).

there's TWO CSS for the <img> tags you show as -
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

.view img {
display: block;
position: relative;
margin: 0 auto;
}

and the container <div> for the <img> has this css -
.view {
overflow: hidden;
position: relative;
text-align: center;
}

and then the hover for that <img> has the scale increased to 10
.view-tenth:hover img,.w3l_banner_nav_right_banner3_btml:hover .view-tenth img{
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

But the enlarged image will NOT be seen outside of the overflow: hidden; <div> (and the opacity: 0; will make th image invisible anyway)

= = = = = = = = = = = = = = = = = = =
You say you need this -
"I would like to place a text over an image while keeping the image visible when hovering."

and then say you need this -
"image to become transparent while showing the text. "

So can you let us see the page with a web address? , so we can see how this page does NOT DO what you want to do?

There are several ways to use HTML placement and CSS stacking (layers) to do images and text in the same page space, but to have the hover effects may take some extra effort to get to work?

Errol Farro

ASKER

Thanks for all your suggestions and sorry for the late reply. I had to take care of an emergency.

The HTML has been adapted in order to give you a better understanding of what we would like to accomplish.

Once activate, the HTML will show two images, a flamingo and a duck (see image 1).

When one hovers over the image, the image is covered with a blue color including text "this is a flamingo (see image 2).

What we would like to accomplish when hovering over the image is
- Text is displayed (this is a flamingo)
- Image remains visible (currently it is totally covered with blue color)

HTML
=====
<html>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<div class="w3l_banner_nav_right">
<div class="w3l_banner_nav_right_banner5">
<h3>Best Deals For New Products<span class="blink_me"></span></h3>
</div>
<div class="w3l_banner_nav_right_banner3_btm">
<div class="col-md-4 w3l_banner_nav_right_banner3_btml">
<div class="view view-tenth">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt=" " class="img-responsive" height="75" width="275" />
<div class="mask">
<h4>This is an flamingo</h4>
</div>
</div>

<h4>Fruits & Vegetables</h4>
<ol>
<li>sunt in culpa qui officia</li>
<li>commodo consequat</li>
<li>sed do eiusmod tempor incididunt</li>
</ol>
</div>
<div class="col-md-4 w3l_banner_nav_right_banner3_btml">
<div class="view view-tenth">
<img src="http://pngimg.com/upload/duck_PNG5011.png" alt=" " class="img-responsive" height="75" width="275"/>
<div class="mask">
<h4>This is a duck</h4>
</div>
</div>
<div class="clearfix"> </div>
</div>
</html>
Capture.JPG

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial