CODEWITHSUNDEEP
htmlcss
harsher
harsher

Reputation: 91

How to write Text on a image.

How to add TEXT in the image...so that the TEXT is view-able only when the image becomes dark when mouse is placed over it.. something like ..the one given in the example image below... Thanks for your help.

.image {
  width: 250px;
  height: 200px;
  background: black;
  position: relative;
  overflow: hidden;
}
.image img {
  transition: all ease 1s;
}
.image:hover img { /* Darkening effect on mouseover */
  background: black;
  opacity: 0.7;
}
.image .arrow { /* Creates a half triangle with top and left arrow transparent */
  opacity: 0;
  border-color: transparent #f2f2f2 #f2f2f2 transparent;
  transition: all ease 1s;
  position: relative;
}
.image:hover .arrow { /* Mouseover effect */
  opacity: 1;
  font-family: Roboto;
  font-size: 36px;
  text-align: center;
  border-image: none;
  border-style: solid;
  border-width: 45px;
  position: absolute;
  bottom: 0;
  font-weight: normal;
  width: 0;
  height: 0;
  right: 0;
}


.image:hover .arrow {
    border-image: none;
    border-style: solid;
    border-width: 45px;
    bottom: 0;
    display: block;
    font-family: Roboto;
    font-size: 36px;
    font-weight: normal;
    height: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    text-align: center;
    width: 0;
}
.image .arrow {
    border-color: transparent #f2f2f2 #f2f2f2 transparent;
    opacity: 0;
    position: relative;
    transition: all 1s ease 0s;
}

.image .arrow span {
    left: 5px;
    position: relative;
    top: -10px;
}
<div class="image">
  <img src="http://lorempixel.com/250/200/sports" />
  <div class="arrow"><span>></span></div>
</div>
enter image description here

Upvotes: 1

Views: 92

Answers (2)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2131

i think you can create like this you need to change the position of the .image class so that text div can appear overlap on that

.image-hover-wrapper {
    display:none;
    text-align: center;
    width: 250px;
    color: red;
    font-size: 35px;
    position: relative;
    top: -125px;
    background: rgba(255,255,255,0.6);
}
.image:hover > .image-hover-wrapper{
   display:block;
   opacity:0.8;    
   transition-property: animation;
   transition-duration: 2s;
   transition-timing-function: linear;   
}
<div class="image">
  <img src="http://lorempixel.com/250/200/sports" />
  <div class="arrow"><span></span></div>
   <div class="image-hover-wrapper">
      Hii 
   </div>
</div>

and here is the Updated DEmo

Upvotes: 0

Peter Girnus
Peter Girnus

Reputation: 2739

It's simple. Create some text inside your wrapper div, then order the text to display on hovering the wrapper. Below is a demo of this logic.

The HTML:

<div class="image">
   <p>I'm some very interesting text!</p>
  <div class="arrow"><span>></span></div>
</div>

The CSS:

 p{
   color: #fff;
   opacity: 0;
   font-weight: bold;
   text-align: center;
   font-size:32px;
   color: red;
  /* bring your own prefixes */
  transform: translate(0, 50%);
   transition: all .5 ease;
}


.image:hover p {
  visibility: visible;
  opacity: 1;
}

CODEPEN DEMO

Upvotes: 1

Related Questions