How to have different transistions for background-image and text in a div using CSS

Question

I'm trying to achieve the transition effect like in the img/links in this website : verena michelitsch.

This is what I've tried until now :

HTML :

<div id="centerpiece">
  <div id="photography"><a href="photography.html">Photography</a></div>
  <div id="painting"><a href="painting.html">Paintings</a></div>
  <div id="sketches"><a href="sketches.html">Sketches</a></div>
  <div id="digitalpainting"><a href="digitalpainting.html">Digital Paintings</a></div>
</div>

CSS :

#centerpiece div {

    border: 10px solid gray;
    border-radius: 100%;
    background-image: url(images/viraj.jpg);
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;

}

#centerpiece div a {
    display: block;/*to extend to div boundary*/
    height: 300px;
    border-radius: 100%;
    font-family: Existence Light, Aaargh, Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

#centerpiece div:hover {
    opacity: 0.5;
}

#centerpiece div a:hover {
    opacity: 1;
}

While the transition occurs for the text(within the a element), it's opacity property is ultimately set to 0.5 and not 1, even though it should as I wrote the CSS rule for #centerpiece div a after #centerpiece div.

How can make the final opacity equal to 1 ?

Please post the relevant HTML. – Weafs.py Dec 29 '14 at 15:41 — Weafs.py, Dec 29 '14 at 15:41
see http://stackoverflow.com/q/5770341/1926369 – vals Dec 29 '14 at 15:44 — vals, Dec 29 '14 at 15:44

jmore009 · Accepted Answer · 2014-12-29T17:35:35.167

You're setting the opacity of #centerpiece div to 0.5 on hover and it's the parent to your a tags. opacity on a parent effects its children so while you're calling 1 on #centerpiece div a it's still inheriting the opacity: 0.5 from its parent. You could set #centerpiece div to 0.5 to begin with and increase to 1. Or you could use rgba (although if you have an image rgba won't affect the opacity)

FIDDLE

UPDATE

This is a more efficent way of doing this given your current fiddle:

HTML

<div class="container">
  <div class="overlay"><a href="#">Photography</a></div>
</div>

CSS

.container{
  background: url("http://www.placecage.com/400/200") no-repeat;
  width: 400px;
  height: 200px;
}

.container:hover .overlay{
  opacity: 1
}

.overlay{
  opacity: 0;
  background: rgba(255,255,255,.8);
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

a{
  display: inline-block;
  font-family: "Arial";
  font-size: 24px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  line-height: 200px;      
}

2nd FIDDLE

NEW UPDATE

What you're looking at in their example is not what you think. If you inspect their code you will see they are not fading out the background at all, they are using inline styling (that appears to be dynamic probably from a database) to add a color that matches each image at a low opacity due to rgba. So if I had to guess I would say when they upload an image they also add a color hex which is then used as an overlay. (I checked their overlays and not only are they all inline which is usually a telltale sign for dynamic code but the colors are all different). In this latest fiddle you'll see I did exactly what you want. Faded the background when you hover but the results are similar to my second fiddle and still probably not what you expect to happen:

3rd FIDDLE

To prove what im saying, I took their image and the color they used for this one and recreated it in my fiddle. All I had to do was swap the image and the color I was using for .overlay's background (from fiddle 2):

RECREATION FIDDLE

I did look into `rgba` but it seems it's only for `background-color` — Flame of udun, Dec 29 '14 at 16:53
@VineetKaushik right, so like I said it wouldn't work for an image. What you could do (and what is most likely being done in that sample you sent) is add an overlay over the image. I will post an example. — jmore009, Dec 29 '14 at 16:55
but doesn't this do something else altogether? can't see how this is supposed to make the background fade out and the text to become more visible. — Flame of udun, Dec 29 '14 at 17:20
@VineetKaushik and I added a new fiddle in which i recreated their effect — jmore009, Dec 29 '14 at 17:34
Thanks a lot! Sorry for the extra effort you had to go through to convince me. I am only a beginner! — Flame of udun, Dec 30 '14 at 02:58

How to have different transistions for background-image and text in a div using CSS

1 Answers1