我正在尝试为父母及其孩子制作两种不同的:hover
效果。
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>
OPACITY TRANSITION
我正在使用以下方法将不透明度更改为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
比例。它建立在与不透明度淡化相同的逻辑上。
SCALE TRANSITION
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;
}
&#13;
<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>
&#13;
答案 0 :(得分:1)
你刚忘记加点
像.image-area和问题将会解决:
from tkinter import *
canvas_width = 300
canvas_height =300
master = Tk()
canvas = Canvas(master,
width=canvas_width,
height=canvas_height)
canvas.pack()
img = PhotoImage(file="pic1.gif")
canvas.create_image(20,20, anchor=NW, image=img)
def change_img():
canvas.delete("all")
canvas.img = PhotoImage(file="pic2.gif")
canvas.create_image(20,20, anchor=NW, image=canvas.img)
master.after(3000, change_img) # run the change_img function in 3,000 milliseconds
mainloop()