我试图将鼠标悬停在一个元素上,使其变大几个百分点,但我希望内部的标题和内容保持原样。 如果我只是向元素添加scale(1.05) ,内容也会缩放。 如果我尝试使用scale(0.95)来对比缩放内部元素,则尺寸将与原始尺寸相同,但展示位置将不相同:
.container { display: block; width: 100%; padding: 50px; } .element { height: 562px; width: 590px; display: inline-block; position: relative; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size: cover; background-position: center center; } .title { font-size: 45px; line-height: 48px; bottom: 10%; position: absolute; margin: 0 25px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); font-weight: 700; font-family: sans-serif; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .element:hover { transform: scale(1.05); z-index: 10; } .element:hover .title { transform: scale(0.95); }<div class="container"> <div class="element"> <div class="title">This is the big title.</div> </div> </div>里面的内容是绝对放置的,所以我可能必须通过指定bottom和left属性来修复它,但我认为内部元素仍然会有一些转换。
有没有办法解决? 只是为了扩展元素而不影响内容?
I'm trying to make the hover on an element, making it bigger by few percent, but I'd like to have the title and the contents inside stay where they are. If I just add scale(1.05) to the element, the contents will scale as well. If I try to counter scale the inner element with scale(0.95) the size will be like the original, but the placement won't be the same:
.container { display: block; width: 100%; padding: 50px; } .element { height: 562px; width: 590px; display: inline-block; position: relative; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size: cover; background-position: center center; } .title { font-size: 45px; line-height: 48px; bottom: 10%; position: absolute; margin: 0 25px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); font-weight: 700; font-family: sans-serif; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .element:hover { transform: scale(1.05); z-index: 10; } .element:hover .title { transform: scale(0.95); }<div class="container"> <div class="element"> <div class="title">This is the big title.</div> </div> </div>The content inside is absolutely placed so I'd probably have to fix it by specifying the bottom and left property, but I think that there will still be some transition on the inner element.
Is there any way around this? Just to expand the element without affecting the contents?
最满意答案
由于element子element会受到影响,因此使用伪元素可能是一个不错的选择。
.container { display: block; width: 100%; padding: 50px; } .element { position: relative; height: 562px; width: 590px; display: inline-block; } .element:before { content: ' '; position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: inline-block; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size: cover; background-position: center center; } .title { font-size: 45px; line-height: 48px; bottom: 10%; position: absolute; margin: 0 25px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); font-weight: 700; font-family: sans-serif; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .element:hover:before { transform: scale(1.05); }<div class="container"> <div class="element"> <div class="title">This is the big title.</div> </div> </div>如果您仍然需要element来添加其他元素等,这可能是第二个选项
.container { display: block; width: 100%; padding: 50px; } .element { position: relative; height: 562px; width: 590px; display: inline-block; } .inner { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: inline-block; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size: cover; background-position: center center; } .title { font-size: 45px; line-height: 48px; bottom: 10%; position: absolute; margin: 0 25px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); font-weight: 700; font-family: sans-serif; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .element:hover .inner { transform: scale(1.05); }<div class="container"> <div class="element"> <div class="inner"></div> <div class="title">This is the big title.</div> </div> </div>Since children of the element will be affected, this might be a good alternative, using a pseudo element.
.container { display: block; width: 100%; padding: 50px; } .element { position: relative; height: 562px; width: 590px; display: inline-block; } .element:before { content: ' '; position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: inline-block; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size: cover; background-position: center center; } .title { font-size: 45px; line-height: 48px; bottom: 10%; position: absolute; margin: 0 25px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); font-weight: 700; font-family: sans-serif; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .element:hover:before { transform: scale(1.05); }<div class="container"> <div class="element"> <div class="title">This is the big title.</div> </div> </div>And if you still need the element to for example add other elements etc., this might be a second option
.container { display: block; width: 100%; padding: 50px; } .element { position: relative; height: 562px; width: 590px; display: inline-block; } .inner { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: inline-block; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size: cover; background-position: center center; } .title { font-size: 45px; line-height: 48px; bottom: 10%; position: absolute; margin: 0 25px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); font-weight: 700; font-family: sans-serif; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .element:hover .inner { transform: scale(1.05); }<div class="container"> <div class="element"> <div class="inner"></div> <div class="title">This is the big title.</div> </div> </div>
更多推荐
发布评论