CODEWITHSUNDEEP
sass
ShawnXDoO
ShawnXDoO

Reputation: 11

How do I make hover for my ".pic" class to get effected?

I want to add :hover this class ".pic".

So it can contain more description on .pic:hover

I use transform SASS, width, and height on .pic:hover that seems not working.

I can't find out the problem.

Please help to find out my question.

Please watch it on my codepen for any details

.pic
  width: 250px
  height: 250px


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

Codepen

Upvotes: 1

Views: 73

Answers (3)

Justin Hammond
Justin Hammond

Reputation: 719

Your code isn't formatted correctly. With CSS, make sure to surround everything with brackets {}. Also make sure to add a semicolon after every line in a class so it knows where to break it up. Change your code to the below and it'll work:

// Adding {} and ; fixed this issue
.pic {
  width: 250px;
  height: 250px;
}

.pic:hover {
  width: 400px;
  height: 400px;
}

Upvotes: 1

Buwaneka Sudheera
Buwaneka Sudheera

Reputation: 1417

Your problem is wrong css. You have to use curly braises and semi colons as well.

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

.pic:hover{
  width: 400px;
  height: 400px;
}

Upvotes: 0

Hash
Hash

Reputation: 8020

You can do something like this,

.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);
}
<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>

Your code,

@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;
  }
}
<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>

or zoom out with text inside,

@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;
  }
}
<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>

Upvotes: 0

Related Questions