The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background Image in Div with Colour Caption that follows ALPHA

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #238756

    Background Image in Div with Colour Caption that follows ALPHA

    Hi All,

    As you can see by this fiddle,

    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?



    <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(;background-size:cover;top: 0;
      left: 0;">
            <span class='caption'>Hello World</span>


    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(}
    @keyframes preload{0%{background-image:url(}
    @-webkit-keyframes sharpen{0%{background-image:url(;-webkit-filter:blur(20px);filter:blur(20px)}
    @keyframes sharpen{0%{background-image:url(;-webkit-filter:blur(20px);filter:blur(20px)}
    /*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; 

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.