Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Background Image in Div with Colour Caption that follows ALPHA

Discussion in 'CSS' started by 7643sfsag6, Mar 5, 2016.

0
  1. #1
    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?

    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>
    SEMrush
    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;
    }
     
    7643sfsag6, Mar 5, 2016 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,224
    Likes Received:
    1,242
    Best Answers:
    22
    Trophy Points:
    400
    #2
    qwikad.com, Mar 5, 2016 IP
  3. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #3
    yes but if i add the height:100% to the caption class, you will see that the blue background does not constrain to the edge of the png
     
    7643sfsag6, Mar 6, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,224
    Likes Received:
    1,242
    Best Answers:
    22
    Trophy Points:
    400
    #4
    Like this?

    https://jsfiddle.net/y44w08y0/8/

    I had to add another class there, since I don't know how to center those words in a circle without position: absolute;

    I am sure somebody has a better solution though.
     
    qwikad.com, Mar 6, 2016 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,224
    Likes Received:
    1,242
    Best Answers:
    22
    Trophy Points:
    400
    #5
    Oh, and by the way. Test your code in firefox. I am not sure if it's actually working in it. At least it didn't in mine. My rule of thumb is if you can't make it work in all modern browsers, discard it.
     
    qwikad.com, Mar 6, 2016 IP
  6. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #6
    well its getting there. the blue just needs to fit the shape of the image.
    the only issue is i have many thumbnails that use alpha, but are not circles, they are having differing edges. so really it needs to be a scheme that works for everything!?
     
    7643sfsag6, Mar 6, 2016 IP
  7. denis bayly

    denis bayly Member

    Messages:
    77
    Likes Received:
    21
    Best Answers:
    5
    Trophy Points:
    35
    #7
    Hi there 7643sfsag6,

    your "piddly fiddly thingy" does not work at all great with IE or Firefox. :D

    Try this example...

    

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="http://www.codingforums.com/screen.css" media="screen">

<style media="screen">
body {
    font:100%/150% arial,sans-serif;
 }
#learning-icon {
    position:relative;
    z-index:0;
    display:block;
    width:20%;
    margin:2em auto;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 0 rgba(0,0,255,0);
    text-decoration:none;
    transition:2s ease-in-out;
 }
#learning-icon img {
    display:block;
    width:100%;
    height:auto;
    filter:blur(50px);
    -webkit-filter:blur(50px);
    animation:sharpen 2s forwards;
 }
#learning-icon::after {
    content:'Hello World';
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    padding-top:42%; 
    box-sizing:border-box;
    color:rgba(255,255,255,0);
    font-size:3vw;
    text-align:center;
    background-color:rgba(0,0,255,0);
    transition:2s ease-in-out;
 }
#learning-icon:hover {
   box-shadow:0 0 1.5em rgba(0,0,255,1);
 }
#learning-icon:hover::after {
    color:rgba(255,255,255,1);
    background-color:rgba(0,0,255,0.6);
 }
@keyframes sharpen {
0 { 
    filter:blur(50px);
    -webkit-filter:blur(50px);
  }
100%{
    filter:blur(0);
    -webkit-filter:blur(0);
  }
 }
</style>

</head>
<body> 

<a id="learning-icon" href="http://www.example.com">
 <img src="http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png" width="200" height="200" alt="learning-icon">
</a>

</body>
</html>
    Code (markup):
    Note:-

    IE, as yet, does not render "filter:blur()"
    ​

    coothead
     
    denis bayly, Mar 6, 2016 IP
    qwikad.com likes this.
  8. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #8
    well functionally it is working great and it is doing what i want BUT
    i had a preloading thing where it would take a lo-res version and blur up to smooth the loading time borrowed from here: https://medium.com/@maxbarry/a-workflow-for-lazy-loading-images-with-nice-blurry-placeholders-8592894d13fa#.20m80wyvh

    AND

    i am using background-image:url and background-size:cover; so it will always fit centred and be fluid too?!
    it doesn't seem that this is preserved in this example...
    thanks anyway

    any suggestions?!
     
    7643sfsag6, Mar 6, 2016 IP
  9. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #9
    by fluid i mean also in changing the height of the browser
     
    Last edited: Mar 6, 2016
    7643sfsag6, Mar 6, 2016 IP
  10. denis bayly

    denis bayly Member

    Messages:
    77
    Likes Received:
    21
    Best Answers:
    5
    Trophy Points:
    35
    #10
    Hi there 7643sfsag6,


    No problem, just change this...

    


#learning-icon {
    position:relative;
    z-index:0;
    display:block;
    width:20%;
    margin:2em auto;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 0 rgba(0,0,255,0);
    text-decoration:none;
    transition:2s ease-in-out;
 }
    Code (markup):
    ...to this ...

    


#learning-icon {
    position:relative;
    z-index:0;
    display:block;
    width:60vmin;
    height:60vmin;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 0 rgba(0,0,255,0);
    text-decoration:none;
    transition:2s ease-in-out;
 }
    Code (markup):

    coothead
     
    denis bayly, Mar 6, 2016 IP
  11. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #11
    thanks again for your help:
    so,

    as i said: the only issue is i have many thumbnails that use alpha, but are not circles, they are having differing edges. so really it needs to be a scheme that works for everything!?

    so if i was to try this image for example, where it is not a circle:
    https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png
    the blue overlay should contrain to the edge of the png. is it even possible?!

    many thanks.

    **seems like we met elsewhere in cyberspace**
     
    7643sfsag6, Mar 6, 2016 IP
  12. 7643sfsag6

    7643sfsag6 Member

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #12
    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/

    thanks anyway
     
    7643sfsag6, Mar 7, 2016 IP
  13. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,224
    Likes Received:
    1,242
    Best Answers:
    22
    Trophy Points:
    400
    #13
    Why? It's not responsive (you can make it responsive, of course) and it's downright annoying. I can imaging how annoyed I'll be every time I have to hover over or click that div. Why are you messing with any of this in the first place? Seems like a lot of work for some really annoying transitions. Also, keep in mind that on ipads, cell phones all those transitions won't matter as you can't really hover over them on mobile devices.
     
    qwikad.com, Mar 7, 2016 IP