Перемещение непрозрачности изображения CSS при наведении текста

Я застреваю, пытаясь заставить изображение исчезать и выходить, когда вы наводите текст на текст.Перемещение непрозрачности изображения CSS при наведении текста

Это код.

Мне нужна помощь в том, что добавить, чтобы изображение получилось таким, чтобы изображение переходило от 0 до непрозрачности до 1, когда текст завис и снова, когда больше не витала.

<style> 
 
h1 { 
 
    text-align: center; 
 
    color: #cbd3db; 
 
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
text-shadow: 2px 2px 4px #d9e0e7; 
 
text-shadow: 2px 4px 4px #d9e0e7; 
 
font-size: 22pt; 
 
} 
 
    
 
    h2 { 
 
    text-align: center; 
 
    color: #cbd3db; 
 
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
text-shadow: 2px 2px 4px #d9e0e7; 
 
text-shadow: 2px 4px 4px #d9e0e7; 
 
font-size: 18pt; 
 
} 
 
    
 
p { 
 
    text-align: center; 
 
    color: #cbd3db; 
 
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
} 
 
    
 
#quote { 
 
    text-align: center; 
 
    color: #97999c; 
 
    font-style: oblique; 
 
    transition: text-shadow 2s, color 4s ease-in-out; 
 
    
 
text-shadow: 5px 8px 7px #97999c; 
 
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; 
 
\t letter-spacing:0.1em; 
 
\t text-align:center; 
 
\t margin: 40px auto; 
 
\t text-transform: lowercase; 
 
\t line-height: 145%; 
 
\t font-size: 12pt; 
 
\t font-variant: small-caps; 
 
position:relative; 
 
} 
 
    
 
    #quote:hover { 
 
color: #cbd3db; 
 
text-shadow: 10px 10px 7px #97999c; 
 
    transition: text-shadow 2s, color 4s ease-in-out; 
 

 

 
    } 
 
    #quote img { 
 
    
 
display: block; 
 
    margin-left: auto; 
 
margin-right: auto; 
 
opacity: 1; 
 

 
    } 
 
</style> 
 

 
<h1>A heading</h1> 
 

 
<br> 
 

 
<h2>Another heading</h2> 
 

 
<div id="quote">"Some text to be hovered over" 
 

 
    <img class"blood" src="http://fc05.deviantart.net/fs49/i/2009/198/8/0/Blood_Splatter_Texture_by_iEniGmAGraphics.png"/> 
 
</div> 
 

 

 
<br>

источник

2015-05-04 Theo

вы можете оформить по ссылке [Make Things Fade In и Out с CSS3] (http://webdesign.about.com/od/css3tutorials/a/fade-in-and -out-with-css3.htm). –

Вы хотите изображение быть скрыто, и при наведении курсора мыши будет отображаться, не так ли?

Если это так, то изменить

#quote img { 

display: block; 
    margin-left: auto; 
margin-right: auto; 
opacity: 1; 

    }

To:

#quote:hover img { 
    opacity: 1; 
} 
#quote img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    opacity: 0; 
    transition: all 4s; 
}

DEMO

источник

2015-05-04 10:03:21 LinkinTED

Спасибо, помощь приветствуется! – Theo

Ваш прием. \t Если ответ подходит вам, отметьте его как решение, щелкнув значок v в левой части экрана. :) – LinkinTED

Вот скрипку для вашего требования: https://jsfiddle.net/rp33r4nt/

добавить легкость в анимации перехода непрозрачности добавлен .

Try следующий CSS

#quote img { 
    display: block; 
    margin - left: auto; 
    margin - right: auto; 
    transition: opacity 1s ease; 
    opacity: 1; 
} 

#quote:hover img { 
    opacity:0 
}

источник

2015-05-04 10:06:31

Перемещение непрозрачности изображения CSS при наведении текста

ответ

Смежные вопросы