CODEWITHSUNDEEP
htmlcss
Anmol Ratan Mohla
Anmol Ratan Mohla

Reputation: 186

How i add text on my slide image

I use some text on my slider images, I use some trick but I am something going wrong here is my css and html:

CSS

.banner {float:left; width:100%; position:relative;}
.container {margin:0 auto; width:200px;}
.inban {float:left; width:100%; position:absolute; z-index:99; top:0px; left:0px;}

HTML

<div class="banner">
<img src="banner-1.jpg" alt="">
<div class="inban">
    <div class="container">
        Test text
    </div>
</div>

Please give me some idea how I add text over the image and in my container.

Upvotes: 0

Views: 107

Answers (3)

Anmol Ratan Mohla
Anmol Ratan Mohla

Reputation: 186

I got the solution:

CSS

.banner{float:left; width:100%;position:relative; text-align:center;}
.container{margin:0 auto; width:960px;}
.inban{ width:100%; position:absolute; left:0px; top:0px;}
img{max-width:100%; height:auto;}

HTML

<div class="container">
<div class="banner">
<img src="banner-1.jpg" alt="">
<div class="inban">
        Test text
    </div>
</div>

Upvotes: 0

Denish Makadia
Denish Makadia

Reputation: 81

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: Animated Text Overlay On Hover</title>
<style>
.box {
  cursor: pointer;
  height: 300px;
  position: relative;
  overflow: hidden;
  width: 400px;
}

.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;
}

.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: 360px;
  height: 240px;
  padding: 130px 20px;
}

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

.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: 2.5em;
  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;
  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);
}
</style>
</head>
<body>
<h1 style="margin:150px auto 50px auto">Demo: Animated Text Overlay On Hover</h1>
<div class="box"> <img src="http://placehold.it/400x300">
  <div class="overbox">
    <div class="title overtext"> Text Demo </div>
    <div class="tagline overtext"> Hover Text is Load </div>
  </div>
</div>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46156385-1', 'cssscript.com');
  ga('send', 'pageview');

</script>
</body>
</html>

Upvotes: 2

Nameismy
Nameismy

Reputation: 152

Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. We'll use that wrapping div as a container for absolute positioning.

HTML

<div class="banner">
<img src="http://dummyimage.com/600x400/000/CCC" alt="">
<div class="inban">
    <div class="container image">
         <h2><span>A Movie in the Park:<span class='spacer'></span><br /><span class='spacer'></span>Kung Fu Panda</span></h2>
    </div>
</div>

CSS

h2 span { 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px;  
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px; 
}

.image { 
position: relative; 
width: 100%; /* for IE 6 */
}

Fixing Semantics

When an inline element breaks, the block breaks immediately after the last character in the line, and begins immediately flush left on the next line. Padding, in this case, does not help us.

To solve this, we'll apply some more spans on either side of the
element to simulate that padding.

$(function() {

$("h2")
    .wrapInner("<span>")

$("h2 br")
    .before("<span class='spacer'>")
    .after("<span class='spacer'>");

});

You can find working JSFiddle here

Upvotes: 2

Related Questions