CSS 요소에 영상 효과를 추가하는 방법은 무엇입니까?

-1

그래서 기본적으로 요소 위에 그림을 추가했습니다. 그 위에 올리면 작동하지만 그 다음에 추가합니다.CSS 요소에 영상 효과를 추가하는 방법은 무엇입니까?

전환 : 0.2 초;

그리고 전환되지 않습니다. 이유가 무엇입니까? 나는 그것이 즉시 나타나지 않고 그림 속으로 들어가기를 원합니다.

도움을 받으실 수 있습니다.

도움이된다면 다음 내용을 사용했습니다. url ("image location"); 이미지를 추가합니다. 나는 당신이 필요로 이해한다면

출처

2016-10-27 KirbStarRulz

시도'전환과 같이합니다 모든 0.2 초; – Xufox

[CSS로만 태그 'content'에 페이드 트랜지션을 사용할 수 있습니까?] (http://stackoverflow.com/questions/23938088/is-possible-use-fade-transition-on-tag-content-only -with-css) – Vucko

비 전환 CSS 규칙에 전환 항목을 추가해야합니다. 게다가 이전에 없었던 요소를 단순히 전환 할 수는 없습니다. 또한 표시 속성을 전환 할 수 없습니다. – connexo

,이 유사합니다

.picturehover { 
 
    background-color: #f0f0f0; 
 
    position: relative; 
 
    height: 200px; 
 
    width: 300px; 
 
} 
 
.picturehover:after { 
 
    background: transparent url(https://lorempixel.com/300/200) center center/cover no-repeat; 
 
    content: ""; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    transition: opacity .4s ease-in-out; 
 
} 
 
.picturehover:hover:after { 
 
    opacity: 1; 
 
}

<div class="picturehover">Some text</div>

출처

2016-10-27 11:58:01 connexo

페이드 아웃 전환이 작동하지 않기 때문에'z-index : 1'과'z-index : -1'을 사용하지 말 것을 제안합니다. –

나중에'z-index' 라인을 추가 했으므로 철저히 검사했다. 힌트를 가져 주셔서 감사합니다, 나는 그것을 제거했습니다. – connexo

나는이

.box{ 
 
    background:#333; 
 
    width:100px; 
 
    height:100px; 
 
    transition:0.2s linear; 
 
} 
 
.box:hover{ 
 
    background:#ccc; 
 
}

<div class="box"></div>

출처

2016-10-27 15:49:40

CSS 요소에 영상 효과를 추가하는 방법은 무엇입니까?

답변

관련 문제