CODEWITHSUNDEEP
htmlcss
Altin I. Sylejmani
Altin I. Sylejmani

Reputation: 65

Why is my css transformation not working?

I want my logos to have a cool "shadow" appear to them when I hover on them, but it isn't working. I added some type of border so that when I hover on it, it appears but only on the edges, I used z-index: -1;, so that my logos appear instead of the border and then with a transformation when I hover on the logos, the border would come to the side but it doesn't work.

HTML

<footer>
    <ul class = "bottom">
        <li><a href = "https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a> 
        </li>
        <li><a href = "#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
    </ul>
</footer>

CSS

footer{
   width: 100%;
   display: block;
   padding: 50px 0;
   background-color: #262626;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.bottom{
   list-style: none;
   display: flex;
}

.bottom li{
   position: relative;
   display: block;
   font-size: 30px;
   height: 60px;
   width: 60px;
   border-radius: 50%;
   background: black;
   line-height: 60px;
   margin: 0 15px;
   cursor: pointer;
}

.bottom li a{
   color: #666;
}

.bottom li:before{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   background: #d35400;
   height: 100%;
   width: 100%;
   border-radius: 50%;
   z-index: -1;
   transition: .5s;
   transform: scale(0.9);
}

.bottom li a:hover:before{
   transform: scale(1.2);
   box-shadow: 0 0 15px #d35400;
}

Upvotes: 1

Views: 115

Answers (3)

Vio K
Vio K

Reputation: 9

This uses box-shadow with hover. So the box will highlight when you hover on the box.

CSS

.bottom {
  transition: box-shadow .3s;
  width: 300px;
  height: 500px;
  margin: 50px;
  border-radius:10px;
  border: 1px solid #ccc;
  background: #fff;
  float: left;
}

.bottom:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

Example: https://codepen.io/ovdojoey/pen/BomKyZ

Upvotes: -1

NicklasF
NicklasF

Reputation: 921

Your styling is on .bottom li::before { thus .bottom li is what you want to trigger on hover.

.bottom li:hover{
 transform: scale(1.2);
 box-shadow: 0 0 15px #d35400;
}

https://jsfiddle.net/42w7hgo6/3/

Do note that you have two display in .footer and before for CSS3 has two colons: ::before

Upvotes: 2

dantheman
dantheman

Reputation: 3814

It's difficult to understand exactly what you want your end result to be, is this close?

* {
  box-sizing: border-box;
}

footer {
  width: 100%;
  display: block;
  padding: 50px 0;
  background-color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom {
  list-style: none;
  display: flex;
}

.bottom li {
  position: relative;
  display: flex;
  font-size: 30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: black;
  line-height: 60px;
  margin: 0 15px;
  transition: all 0.2s ease;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.bottom li a {
  color: #666;
  display: flex;
  text-decoration: none;
}

.bottom li:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  border: 2px solid #d35400;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<footer>
  <ul class="bottom">
    <li><a href="https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a>
    </li>
    <li><a href="#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
    <li><a href="#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
    <li><a href="#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
  </ul>
</footer>

Upvotes: 2

Related Questions