display text and image at the same time : Opacity of background

Question

Sorry, May be my tone is not good,

Question:

I am using CSS3 code of opacity background like this

Edit: (adding code)

CSS:

opecity {
   opacity:.75; 
   content:('Hello');
   background:#111 url(../img/view.png) no-repeat center;
} 
.opecity img:hover{
   -moz-opacity: 0.10;
  opacity: 0.10;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
   background:#000;
}

HTML:

<div class="opecity">
  <a class="example-image-link" href="img/port1.png" data-lightbox="example-1">
     <img class="example-image" src="img/port1.png" alt="thumb-1" width="250" height="220"/>
  </a>
</div>

This code display image only, but not display content 'Hello'. But I want to display image and content together at the same time. I also concern with this
Stackoweflow.com question.

Image and text with opacity background in the same DIV

But I don't get solution.

it could be your browser, can you please show us part of the code?(HTML) — jcho360, Aug 30 '13 at 12:50
its css code .opecity { opacity:.75; content:('Hello'); background:#111 url(../img/view.png) no-repeat center; } .opecity img:hover{ -moz-opacity: 0.10; opacity: 0.10; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); background:#000; } — bigtechideas, Aug 30 '13 at 12:58

score 0 · Answer 1 · answered Aug 30 '13 at 13:16

0

from W3Schools: "The content property is used with the :before and :after pseudo-elements, to insert generated content."

Try

.opecity:after {
    content:'Hello';
}

answered Aug 30 '13 at 13:16

Gileses

1

jcho360 · Accepted Answer · 2013-09-03T13:24:21.273

First line, You've opecity { and you should use .opecity because it's a class.
Separate the Content and place it in his own .classs {}

I.E:

.example-image-link:hover:after {
 content:'Hello';
}

It wont work if you use it before or after the image class (Try This)

<\div class="opecity">

<\a class="example-image-link" href="img/port1.png" data-lightbox="example-1"> <\img class="example-image" src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" alt="thumb-1" width="250" height="220"/> </div>

.example-image-link:hover:after { content:'Hello'; }

remove the \ and change .example-image-link:hover:after for img:hover:after

The link that you posted they used another method:

try this:

<!DOCTYPE html>
<html>
<body>
<style>

div{
  position: relative;
}
span{
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  display: block;
}
</style>

<div>
  <span>Title</span>
  <img src="http://humor.desvariandoando.com/wp-content/uploads/susto.jpg" />
</div>

</body>
</html>

(I took it from your link)

you can test all the html and css here: http://jsfiddle.net/

display text and image at the same time : Opacity of background

2 Answers2