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> 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; }
Your problem was you used the span tag as opposed to a div tag for 'caption'. Changing it to div did the trick: https://jsfiddle.net/y44w08y0/5/
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
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.
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.
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!?
Hi there 7643sfsag6, your "piddly fiddly thingy" does not work at all great with IE or Firefox. 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
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?!
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
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**
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
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.