css - hover over photo wont add transparent div -

-

i'm trying add transparent text overlay on top of image. i've decided using css add transparent div easiest, can't figure out why code isn't working. changed opacity of image when hovering on , set div containing text visibility:hidden. used hovereffect make visibility:visible. can't work though. please help. here's fiddle:

https://jsfiddle.net/3lx1pyl9/

here's html: 

<div id="chickcontainer">          <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>         <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750">         <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrzrjv4ilzyh0eqyvg9-oidaw1t24xa_vmvrx4qy-woymigpcx6">     </div>

and css: 

#chickcontainer img{     position:relative;     width:30%;     height:30%;     display:inline-block;     margin-left:2%;     border-radius:100%;     border: solid .5px;  }  .overlay{     visibility:hidden;     position:absolute;     width:20%;     height:90%;     top:12%;     left:7%;     z-index:0; }  #chickcontainer img:hover .overlay{     visibility:visible;     z-index:100; }

the problem selector:

#chickcontainer img:hover .overlay

this selector expects .overlay descendent of img:hover , images not able have descendants @ all. in html, .overlay sibling sits next image.

<img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>

instead, should use "next sibling" + selector select next element , apply style it.

#chickcontainer img:hover + .overlay

here's working example

#chickcontainer img{      position:relative;      width:30%;      height:30%;      display:inline-block;      margin-left:2%;      border-radius:100%;      border: solid .5px;    }    .overlay{      visibility:hidden;      position:absolute;      width:20%;      height:90%;      top:12%;      left:7%;      z-index:0;  }    #chickcontainer img:hover + .overlay{      visibility:visible;      z-index:100;  }
<div id="chickcontainer">      <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>      <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750">      <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrzrjv4ilzyh0eqyvg9-oidaw1t24xa_vmvrx4qy-woymigpcx6">  </div>


Comments

Post a Comment

Popular posts from this blog

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

jsf - "PropertyNotWritableException: Illegal Syntax for Set Operation" error when setting value in bean -

-
this question has answer here: how send form input values , invoke method in jsf bean 1 answer i error when trying send values jsf page bean. i want set values fields in bean, create airplane instance , add database. error telling me use illegal syntax setter part of bean. why error? didnt find on site helped me problem. here jsf part: <h4>add plane</h4> <c:if test="#{not empty listairplanebb.error}"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span> <h:outputtext value="#{listairplanebb.error}" /> </div> </c:if> <h:form> <table class="table"> <thead> ...
Read more

arrays - Algorithm to find ideal starting spot in a circle -

-
so problem have been debating such: your given array of integers representing circle. then, have pick spot in circle start. place start, compare value @ array number of steps took there , if steps less or equal number, include in final set. find place start have elements in set. ex, a=[0, 1, 2] if start @ index=0, then: a[0]=0 < =0 0 included a[1]=1 < =1 1 included a[2]=2 < =2 2 included final set: {0,1,2} if start @ index=1, then: a[1]=1 > 0 1 not included a[2]=2 > 1 2 not included here loop around a[0]=0 > 2 0 included final set: {0} if start @ index=2, then: a[2]=2 > 0 2 not included, here loop around a[0]=0 < = 1 0 included a[1]=1 < = 2 1 included final set: {0,1} so in trivial case, starting position index=0 best position results in final set elements. brute force method of finding obvious, trying find more efficient method. attempts far have been examine trying find max intersect of viable starting ranges calculated each element in arr...
Read more