1

The effect I am trying to create is when I hover over my image it will blur the image and display some text over it. So far I am able to blur the image and display the text over it, the only problem is that the text is also blurred. How do I prevent the text from also being blurred out? any suggestions appreciated

HTML

<div class="row3">
            <div class="six left">
            <p class = "imgDescription">Description yo</p>
            </div><!--closing column 6-->

            <div class="three middle">
            </div><!--closing column 3-->

            <div class="three right">
            </div><!--closing column 3-->
        </div>

CSS

.row3 .left{
    background: url('zombiegame.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: all 1s ease;
    -moz-webkit-transition: all 1s ease;
    -ms-webkit-transition: all 1s ease;
    -o-webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.imgDescription{
    color: white;
    visibility: hidden;
    opacity: 0;
}

.row3 .left:hover{
    background: url('zombiegame.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-filter: blur(1px);
}

.row3 .left:hover .imgDescription{
    visibility: visible;
    opacity: 1;
}
Ciaran
  • 697
  • 1
  • 12
  • 35

1 Answers1

0

I find a way that you can try, not use css and define a blur event while cancel bubble on p element, then the parent blur event will not affect child element.

Crabime
  • 644
  • 11
  • 27