css3 - CSS 3 flip effect on mouse enter -


i want display content on mouse enter flip effect shown in sample site http://www.taboola.com/

when hover drive traffic section blue colored div flipped over. how can css3?

the answer right there in code. use browser's inspection tools find relevant code per element. here on stackoverflow don't give freebies, i.e. expect effort , not come here asking or that. know this, i extracted relevant code source code. it's make fit needs.

.cta3 li {   perspective: 1000;   padding: 0;   display: block;   width: 33.3%;   text-align: center;   float: left;   position: relative; }  .cta3 li .cta3 {   opacity: 0;   transform-origin: bottom;   transform: rotatex(90deg);   transition: 400ms;   width: 100%;   position: absolute;   bottom: 0;   background: #3570cc;   text-align: center;   z-index: 2000;   font-size: 15px;   padding: 20px; }  .cta3 li:hover .cta3 {   bottom: -10px;   opacity: 1;   transform: rotatex(0deg); } 

Comments