如何让我的“.pic”课程悬停起来？

时间：2017-07-12 08:27:41

标签： sass

我想添加：将此类悬停在“.pic”。

因此它可以包含有关.pic：hover

的更多描述

我在.pic上使用变换SASS，宽度和高度：悬停似乎无效。

我找不到问题。

请帮助找出我的问题。

请在我的codepen上观看任何细节

.pic
  width: 250px
  height: 250px


  //it doesn't get bigger when mouse is hovering over it
.pic:hover
  width: 400px
  height: 400px

Codepen

3 个答案:

答案 0 :(得分：1)

您的代码格式不正确。使用CSS，确保用括号{}包围所有内容。还要确保在类中的每一行之后添加分号，以便知道将其分解的位置。将您的代码更改为以下代码，它将起作用：

[  {id:0, times:2},
   {id:1, times:1},
   {id:2, times:1}]

答案 1 :(得分：0)

你可以这样做，

＆＃13;
＆＃13; 
.item {
  position: relative;
  
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
＆＃13; 
<div class="item">
  <img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="pepsi" width="540" height="548">
  
  <div class="item-overlay top"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

您的代码，

＆＃13;
＆＃13; 
@charset "UTF-8";
* {
  font-family: 微軟正黑體;
  position: relative;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
  display: flex;
  justify-content: center;
  align-items: center;
}

.camera {
  width: 200px;
  height: 200px;
  border: 10px solid #fff;
  border-radius: 50px;
  position: absolute;
  transform: translateY(-50%);
  animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
  perspective: 500;
  -webkit-perspective: 500;
}

.lens {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 15px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: lensIn 0.3s 1.85s backwards;
}

.flashlight {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 20px;
  animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: flash 0.3s 2.45s both;
}

.pic {
  width: 250px;
  height: 250px;
  border: 5px solid #fff;
  border-bottom: 25px solid #fff;
  background: #ccc;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
  overflow: hidden;
  transition: 0.3s;
  box-sizing: border-box;
}

.pic:hover img {
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
.pic img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}


@keyframes ballUp {
  0% {
    top: 50%;
    width: 5px;
    height: 5px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    top: 10%;
    width: 5px;
    height: 5px;
  }
}
@keyframes ballDown {
  0% {
    top: 10%;
  }
  100% {
    top: 50%;
  }
}
@keyframes cameraIn {
  0% {
    width: 5px;
    height: 5px;
  }
  80% {
    width: 250px;
    height: 250px;
  }
  100% {
    height: 200px;
    width: 200px;
  }
}
@keyframes lensIn {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    width: 120px;
    height: 120px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}
@keyframes flashlightIn {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes picIn {
  0% {
    height: 0;
    width: 0;
    top: 100%;
    transform: translate(-50%, 0);
    opacity: 0;
  }
  100% {
    height: 120px;
    width: 120px;
    top: 100%;
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@keyframes picFlip {
  0% {
    transform: translate(-50%, 0) rotateX(0deg);
    top: 100%;
    width: 120px;
    height: 120px;
  }
  100% {
    transform: translate(-50%, -50%) rotateX(360deg);
    top: 50%;
    width: 250px;
    height: 250px;
  }
}
@keyframes showImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
＆＃13; 
<div class="wrapper">
  <div class="camera">
    <div class="lens"></div>
    <div class="flashlight"></div>
    <div class="pic">
      <div class="imgbox"><img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt=""/></div>
      <div class="text">
        <h1>Hello</h1>
        <h2>This is my memory</h2>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

或缩小文字内部，

＆＃13;
＆＃13; 
@charset "UTF-8";
* {
  font-family: 微軟正黑體;
  position: relative;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

h5 {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0;
  z-index: -1;
}

.camera {
  width: 200px;
  height: 200px;
  border: 10px solid #fff;
  border-radius: 50px;
  position: absolute;
  transform: translateY(-50%);
  animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
  perspective: 500;
  -webkit-perspective: 500;
}

.lens {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 15px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: lensIn 0.3s 1.85s backwards;
}

.flashlight {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 20px;
  animation: flashlightIn 0.3s 2.15s backwards;
}

.flashlight:after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: flash 0.3s 2.45s both;
}

.pic {
  width: 250px;
  height: 250px;
  border: 5px solid #fff;
  border-bottom: 25px solid #fff;
  background: #ccc;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
  overflow: hidden;
  transition: 0.3s;
  box-sizing: border-box;
}

.pic:hover img {
  -moz-transform: scale(0.65);
  -webkit-transform: scale(0.65);
  transform: scale(0.65);
}

.pic img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@keyframes ballUp {
  0% {
    top: 50%;
    width: 5px;
    height: 5px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    top: 10%;
    width: 5px;
    height: 5px;
  }
}

@keyframes ballDown {
  0% {
    top: 10%;
  }
  100% {
    top: 50%;
  }
}

@keyframes cameraIn {
  0% {
    width: 5px;
    height: 5px;
  }
  80% {
    width: 250px;
    height: 250px;
  }
  100% {
    height: 200px;
    width: 200px;
  }
}

@keyframes lensIn {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    width: 120px;
    height: 120px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}

@keyframes flashlightIn {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes picIn {
  0% {
    height: 0;
    width: 0;
    top: 100%;
    transform: translate(-50%, 0);
    opacity: 0;
  }
  100% {
    height: 120px;
    width: 120px;
    top: 100%;
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes picFlip {
  0% {
    transform: translate(-50%, 0) rotateX(0deg);
    top: 100%;
    width: 120px;
    height: 120px;
  }
  100% {
    transform: translate(-50%, -50%) rotateX(360deg);
    top: 50%;
    width: 250px;
    height: 250px;
  }
}

@keyframes showImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
＆＃13; 
<div class="wrapper">
  <div class="camera">
    <div class="lens"></div>
    <div class="flashlight"></div>
    <div class="pic">
      <div class="imgbox">
        <h5>
Tech-Background
</h5>
        <img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="" />
      </div>
      <div class="text">
        <h1>Hello</h1>
        <h2>This is my memory</h2>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你的问题是错误的CSS。你必须使用卷曲炖和半冒号。

.pic{
  width: 250px;
  height: 250px;
}

.pic:hover{
  width: 400px;
  height: 400px;
}
相关问题
最新问题