html - Fade out image shown on hover after mouse leaves area using CSS -


working on new homepage, in wordpress using html editor because wordpress themes slow site down hec. i'm ready go, wondering how accomplish following:

on staging page here can see image appears in front of it. want image fade out after mouse moves off image.

here's code got going:

<div class="imagebox"> <div class="imageinn">     <img src="https://pausethemoment.photography/wp-content/uploads/2017/07/melbourne-wedding-photography-pause-the-moment-beach-wedding-photography-610x345.jpg" alt="sandringham melbourne wedding photography - sun sets on couple on beach."> </div> <div class="hoverimg">     <a href="https://pausethemoment.photography/contact-us/"><img src="https://pausethemoment.photography/wp-content/uploads/2017/07/wedding-photography-melbourne-limited-dates-overlay.png" alt="pause moment melbourne wedding photography" width="610" height="345" class="aligncenter size-full wp-image-14308" /></a> </div> </div>

and css:

.imagebox      {         position: relative;         float: left;     }     .imagebox .hoverimg {         visibility:hidden;         position: absolute;         left: 0;         top: 0;         opacity: 0;         transition: visibility 0s, opacity 0.5s linear;     }     .imagebox:hover .hoverimg {                 display: block;         visibility: visible;         opacity: 1;     }

have tried using ::after tag on 

 .imagebox .hoverimage

in various formats this:

.imagebox:hover::after .hoverimg          {         visibility:visible;         position: absolute;         left: 0;         top: 0;         opacity: 0;         }

but no avail. have played around animation delays etc, can't seem stay on there! tried webkit transitions couldn't them fade in. appreciated!

the problem seems using visibility property. css transition doesn't know how generate intermediate values between "visible" , "hidden" because values not numeric.

try removing occurrences of visibility , applying transition opacity only.

.imagebox {     position: relative;     float: left; } .imagebox .hoverimg {     /*visibility:hidden;*/     position: absolute;     left: 0;     top: 0;     opacity: 0;     transition: /*visibility 0s,*/ opacity 0.5s linear; } .imagebox:hover .hoverimg {             display: block;     /*visibility: visible;*/     opacity: 1; }

Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more