0

I have an image, that on hover, I want to have an opacity of .7, and then the hidden text to show. I have it working, but the text also fades, as it is a child of the faded image.

Is there a way around fixing this so the text doesnt fade?

Things to take into consideration are that the whole thing will be in bootstrap and the images are dynamically loaded from a db as well as the text.

Heres what I have working so far(thanks to researchinmg other threads on this site).

html

<div class="portfolioImage" style="background-image: url('http://placekitten.com/200/150');">
    <div class="footerBar">A Sample Image</div>
</div>

css

.portfolioImage {
   width: 200px;
   height: 150px;
   position: relative;
   -webkit-transition: all 0.3s ease;
   -moz-transition:    all 0.3s ease;
   -o-transition:      all 0.3s ease;
   ms-transition:     all 0.3s ease;
   transition:         all 0.3s ease; 
   opacity: 1.0;
   z-index: 3;
}

.footerBar {    
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   display: none;
   text-align:center;
   color:#000;
}

jQuery

$('.portfolioImage').hover(function(){                      
        $(this).css({"opacity":"0.7"});
        $('.footerBar').css('display','block');
        }, 
        function () {
            $(this).css({"opacity":"1.0"});
            $('.footerBar').css('display','none');
        }
    );

heres a fiddle showing the example jsfiddle

any help greatly appreciated

Barry Watts
  • 784
  • 2
  • 14
  • 43

4 Answers4

2

The easiest solution is to not target the entire containing div, which is why everything is lowering the opacity, so I would put the image in its own div, position it accordingly, and then simply lower the opacity on the image div, leaving everything else "as-is":

Working fiddle demo here: http://jsfiddle.net/g8n0csca/1/

The Javascript

$('.portfolioImage').hover(
   function() {
         $(this).find(".image_frame").addClass("lowerOpacity");
}, function(){
     $(this).find(".image_frame").removeClass("lowerOpacity");
});

The HTML

<div class="portfolioImage">
    <div class="footerBar">A Sample Image</div>
    <div class="image_frame" style="background-image: url('http://placekitten.com/200/150');">
</div>

The CSS

.portfolioImage {
    width: 200px;
    height: 150px;
    position: relative;
}

.footerBar {    
     position: absolute;
     padding-top:50%;
     overflow:hidden;
     width:100%;
     height:20%;
     color:#000;
     transform: translateY(-50%);
     text-align:center;
     z-index:1;
}

.image_frame {
    width:100%;
    height:100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    ms-transition:      all 0.3s ease;
    transition:         all 0.3s ease; 
    position:absolute;
    z-index:2;
    opacity: 1.0;    
}

.lowerOpacity { opacity:0.7; }

Working fiddle demo here: http://jsfiddle.net/g8n0csca/1/

Hope this helps.

radiovisual
  • 6,298
  • 1
  • 26
  • 41
1

You don't need JS here at all. Just change your code like this:

<div class="portfolio-item">
    <img src="blah-blah-blah" />
    <p>Some text</p>
</div>

And css something like this:

.portfolio-item {
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.portfolio-item > img {
    transition: all 0.2s ease;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}
.portfolio-item > p {
    transition: all 0.2s ease;
    opacity: 0;
}
.portfolio-item:hover > img {
    opacity: 0;
}
.portfolio-item:hover > p {
    opacity: 1;
}

The one problem of this approach is that you can't use it when portfolio item block must have size of it's image.

But if not you can even show an image center by changing your top, right, bottom and left to something like -999px and setting "margin: auto". Also you can (of course) set your image max-width and/or max-height.

Timofey
  • 141
  • 6
1

WORKING FIDDLE

There is a workaround for this, only it's not the nicest but it works! You have to make another div inside the parent, and that is the image.

<div class="portfolioImage">
        <div class="image" style="width: 100%; height: 100%; background-image: url('http://placekitten.com/200/150');"></div>
        <div class="footerBar">A Sample Image</div>
</div>

Than the text will not be the child of the image, and it will not fade out again.

Refilon
  • 3,334
  • 1
  • 27
  • 51
0

Use rgb : 

$('.portfolioImage').hover(function(){                      
            $(this).css({"rgb":"0,0,0,0.7"});
            $('.footerBar').css('display','block');
            }, 
            function () {
                $(this).css({"opacity":"1.0"});
                $('.footerBar').css('display','none');
            }
        );

For more details see : Opacity of background-color, but not the text

Community
  • 1
  • 1
toto21
  • 612
  • 5
  • 9
  • I changed the code but now the background image doesnt fade http://jsfiddle.net/s5ozf1r8/3/ – Barry Watts Dec 03 '14 at 14:13
  • Unless the background-image can be replaced by a background-color, or a css gradient, this is unlikely to solve the problem. – David Thomas Dec 03 '14 at 14:13
  • http://www.corelangs.com/css/box/hover.html (Image Hover Text Overlay) found this on google, might work the way you want it just add transition effect. – nCore Dec 03 '14 at 14:14