简体   繁体   中英

Css hover zoom effect wont work

I have one problem about CSS hover zoom effect.

I have created this DEMO from codepen.io

In this demo you can see there is red color div. When you click the div .CRtW11 will opening. So i want to add hover zoom effect for .ReaC div. I tried the following transform effect but it doesn't worked.

   -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);

I don't understand where i am doing wrong anyone can help me in this regard ?

HTML

CSS

.cR {
   width:20px;
   height:20px;
   position:relative;
   background-color:red;
   cursor:pointer;
}
.CRtW11 {
   position:absolute;
   width:215px;
   height:40px;
   background-color:blue;
   opacity:0;
   transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -webkit-transform-origin: left bottom 0px; 
  -webkit-transform: scale(0); 
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.24);
   z-index:1;
   margin-top:-45px;
   border-radius:30px;
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
   padding:5px;
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
}
.CRtW11-active {
   box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    opacity: 1;
    transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease; 
   -webkit-transform: scale(1); 
}

.ReaC {
   float:left;
   position:relative;
   width:30px;
   height:30px;
   border-radius:50%;
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   background-color:red;
   margin-right:5px;
   display:none;
   opacity:0;
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.ReaC:hover
{
   background:yellow;
   -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

Try removing the following from .ReaC-active

-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM