html - Opacity when hovering DIV or other Element -


i want apply opacity: 1; paragraph when hovering on (i have figured out) and when hover header above it.

this css

.testh {     font-family: impact;     text-align: center;     font-size: 50px;     transition: 1s; }  .testp {     text-align: center;     opacity: 0.5;     font-size: 18px;     transition: 1s; }  #testhdiv:hover {     opacity: 1; }  .testp:hover {     opacity: 1; } 

my html

    <div id="testhdiv"><h1 class="testh"><b>< ></b></h1>     <p class="testp">text , text, more text<br>bla bla bla bla</p>     </div> 

so, can see try opacity paragraphs current 0.5, 1 when hovering div - idea is: being able hover "box"/the div, , text becomming less transparent. though think opacity on hover of div not work div defined div, not text, , therefor can't transparent?

i have been struggling while now. wanting this: http://demo.web3canvas.com/themeforest/flathost/onepage/index.html#testimonials, hover within range of text , being zoomed - in case, opacity.

you can set class <p> or just, use operator set :hover paragraph.

example:

#testhdiv:hover > p {     opacity: 1; } 

http://jsfiddle.net/g97pusex/1/


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -