0
부모와 자식에 대해 두 가지 다른 효과를 만들려고합니다.<img> 태그의 두 번째 호버 천이가 올바르게 작동하지 않습니다.
HTML
<section class="col large-poster">
<div class="image-area">
<img class="img-cover" src="/path.png" alt="Maven" />
</div>
<div class="poster-cover">
<div>
<h1>
Item
</h1>
</div>
</div>
</section>
불투명도 전환 내가 불투명도를 변경하고
이 사용 1
에 :
main#wrap > .page > .group > section.large-poster > .image-area {
position: absolute;
width: 100%;
height: 100vh;
opacity: .265;
transition: 4s ease;
}
main#wrap > .page > .group > section.large-poster:hover > .image-area {
opacity: 1;
}
이 잘 작동하지만 내가로 천천히 확장 할 수 있기를 바랍니다 음, 내 CSS는 :hover
스케일로 작동하지 않는 것 같습니다. 불투명도 페이드와 동일한 로직으로 작성됩니다.
당신은 그냥 할 일을 넣어 잊어 버린
main#wrap > .page > .group > section.large-poster > .image-area > img {
margin-top: 0;
margin-left: -752px;
width: auto;
/* height: auto */
height: 1000px;
transform:scale(1,1);
transition: 8s all;
}
main#wrap > .page > .group > section.large-poster:hover > image-area > img {
transform:scale(1.2,1.2)
}
html {
font-size: 62.5%;
font-family: sans-serif;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
padding: 0;
margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
clear: both;
}
.row, .clearfix, .group {
zoom: 1;
}
body, html {
height: 100%;
}
body {
color: #000;
font-weight: 300;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
background: #fff
}
img:not(.img-cover),
svg {
display: block;
max-width: 100%;
height: auto
}
.col {
width: 25%;
float:left;
display:block
}
main {
display: block;
background: black
}
main#wrap > .page > .group > section.large-poster {
min-height: 892px;
height: 100vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
main#wrap > .page > .group > section.large-poster > .image-area {
position: absolute;
width: 100%;
height: 100vh;
opacity: .265;
transition: 4s ease;
}
main#wrap > .page > .group > section.large-poster:hover > .image-area {
opacity: 1;
}
main#wrap > .page > .group > section.large-poster > .image-area > img {
margin-top: 0;
margin-left: -752px;
width: auto;
/* height: auto */
height: 1000px;
transform:scale(1,1);
transition: 8s all;
}
main#wrap > .page > .group > section.large-poster:hover > image-area > img {
transform:scale(1.2,1.2)
}
main#wrap > .page > .group > section.large-poster > .poster-cover {
position: relative;
z-index: 2;
}
main#wrap > .page > .group > section.large-poster > .poster-cover > div {
margin: 0 40px;
text-align: center
}
main#wrap > .page > .group > section.large-poster > .poster-cover > div > h1 {
text-transform: uppercase;
color: #fff;
font-size: 25px;
font-size: 2.455rem;
line-height: 1.2;
}
<main id="wrap">
<div class="page">
<div class="group">
<section class="col large-poster">
<div class="image-area">
<img class="img-cover" src="https://wallpapercave.com/wp/k15SYSI.jpg" alt="Maven" />
</div>
<div class="poster-cover">
<div>
<h1>
First
</h1>
</div>
</div>
</section>
<section class="col large-poster">
<div class="image-area">
<img class="img-cover" src="https://wallpapercave.com/wp/k15SYSI.jpg" alt="Maven" />
</div>
<div class="poster-cover">
<div>
<h1>
Second Item
</h1>
</div>
</div>
</section>
<section class="col large-poster">
<div class="image-area">
<img class="img-cover" src="https://wallpapercave.com/wp/k15SYSI.jpg" alt="Maven" />
</div>
<div class="poster-cover">
<div>
<h1>
Third Item
</h1>
</div>
</div>
</section>
<section class="col large-poster">
<div class="image-area">
<img class="img-cover" src="https://wallpapercave.com/wp/k15SYSI.jpg" alt="Maven" />
</div>
<div class="poster-cover">
<div>
<h1>
Last Item
</h1>
</div>
</div>
</section>
</div>
</div>
</main>
방금 forgott 두 번째 CSS 선택기 "이미지 영역"을 가리 킵니다. 여기에서 main # wrap> .page> .group> 섹션. 큰 포스터 : 호버> 이미지 영역> img { 변형 : scale (1.2,1.2) } 이것은 이미지 영역이어야합니다 (이미지 영역은 학급 이름) –
@MarouenMhiri Oh. 나의 . 하나님. 나는 휴식을 취할 필요가있다. 고맙습니다. 추신. 대답 해주세요! – cmp
np 나는 당신이 간과 한 것을 찾기 위해 오랜 시간을 보냈을 때 그것을 알고있다 :-) –