Background Image in Div with Colour Caption that follows ALPHA

[j7f4f2a4fds2]

Background Image in Div with Colour Caption that follows ALPHA

Hi All,

As you can see by this fiddle, https://jsfiddle.net/postcolonialboy/ou5h0wnw/4/

everything is working great, except i would like the blue that is behind the text that is reveal on hover, to cover the entire icon (ie. until where the transparency begins)

Any ideas?

Thanks

HTML

<label for="modal_2">
  <a class="img-hover">
    <div class="item nudge1 width1 cat-2 cat-4" id="bg1">
      <div class="overlay" style="background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);background-size:cover;top: 0;
  left: 0;">

        <span class='caption'>Hello World</span>
      </div>
    </div>
  </a>
</label>

CSS

a.img-hover:hover {
  -webkit-filter: drop-shadow(0px 0px 10px #00F);
  filter: drop-shadow(0px 0px 10px #00F);
}

#bg1 {
  width: 90vmin;
  height: 90vmin;
  margin: 0 auto;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  background-size: cover;
  -webkit-animation: sharpen 4s;
  animation: sharpen 4s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#bg1::after {
  content: '';
  -webkit-animation: preload 1s;
  animation: preload 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes preload{0%{background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png)}
}
@keyframes preload{0%{background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png)}
}
@-webkit-keyframes sharpen{0%{background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter:blur(20px);filter:blur(20px)}
100%{background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter:blur(0px);filter:blur(0px)}
}
@keyframes sharpen{0%{background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter:blur(20px);filter:blur(20px)}
100%{background-image:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter:blur(0px);filter:blur(0px)}
}

/*Isotope Divs */
.item {
  font-size: 8pt;
  text-align: justify;
  float: left;
  width: 332px;
  height: 213px;
  background: 0;
  margin: 80px;
  border: 0px solid black;
}
.overlay {
  opacity: 0;
  height: 100%;
  text-align: center;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.item:hover .overlay {
  opacity: 1;
  height: 100%;
  text-align: center; 
}
.caption {z-index:100;
  color: white;

  opacity: 0;
  position: relative;
  top: 50%;
background-color: rgba(0, 0, 255, .60);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .4s ease-out 0.4s;
  -moz-transition: all .4s ease-out 0.4s;
  -o-transition: all .4s ease-out 0.4s;
  -ms-transition: all .4s ease-out 0.4s;
  transition: all .4s ease-out 0.4s;
}
.item:hover .caption {
  opacity: 1; 
}

[j7f4f2a4fds2]

ok i went for a cheap way out.
which is to just switch div content using jquery. therefore i will make a separate image that simulates a blue filter, then the caption is working well too.
https://jsfiddle.net/postcolonialboy/mc0fc9c8/

[Author]

Posts