javascript - How to create a smooth zoom and display an overlay when another HTML element gets hovered? -


1st problem: trying display text overlay when "point" class gets hovered, me works display when "caption" class gets hovered, how fix it?

2nd problem: need create smooth zoom in image when "point" class gets hovered, how can it?

demo: http://jsfiddle.net/0qgcn2uu/12/

html:

<div class="caption">     <span class="point"></span>     <img src="http://www.blasdale.com/pictures/2007/hendon/thumbs/img_3337.jpg" />     <div class="caption__overlay">         <div class="caption__overlay__content">             <img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-th7atkz55uw/voatqsmgt4i/aaaaaaaaaum/bb199rdzmue/s1600/alone.png" />         </div>     </div> </div>

css:

.caption {     position: relative;     overflow: hidden;     -webkit-transform: translatez(0); }  .caption::before {     content: ' ';     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     background: transparent;     transition: background .35s ease-out; }  .captionhover::before {     background: rgba(248, 214, 215, .5); }  /* want when hover on circle, image overlay, doesn't work */ .point:hover: + .caption::before {     background: rgba(248, 214, 215, .5); }  .point {     position: absolute;     display: block;     height: 25px;     width: 25px;     border-radius: 30px;     background-color: black; }  .caption__overlay {     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     padding: 10px;     color: white;     -webkit-transform: translatey(100%);     transform: translatey(100%);     transition: -webkit-transform .35s ease-out;     transition: transform .35s ease-out; } .caption:hover .caption__overlay {     -webkit-transform: translatey(0);     transform: translatey(0); }  .caption {     display: inline-block; }  .caption__media{     max-width: 100%; }

jquery:

$(document).ready(function() {    $(".point").mouseenter(function() {       $('.caption').addclass('captionhover');     });     $('.point').mouseleave(function() {        $('.caption').removeclass('captionhover');     }); });

all need adjacent sibling selector, general sibling selector , ftransform

*{    box-sizing: border-box  }    figure{    overflow: hidden;    width: 250px;    height: 250px;    margin: 50px auto;    z-index:1;    position: relative  }  figure span{    display: block;    width: 16px;    height:16px;    border-radius: 50%;    background: black;    z-index: 2;        position: absolute;    top: 10px;    left: 10px;    cursor: pointer  }  figure img, figure figcaption{    -webkit-transition: 1s ease  }    figure figcaption{    position: absolute;    top: 100%;    z-index: 2;    width: 100%;    left: 0;    text-align: center;    color: white  }    figure span:hover + img{    -webkit-transform: scale(2,2)  }  figure span:hover ~ figcaption{    top: 50%  }
<figure>    <span class=point></span>    <img src="http://www.blasdale.com/pictures/2007/hendon/thumbs/img_3337.jpg" />    <figcaption>hello!</figcaption>  </figure>


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more