Posted in site documentation
380
1:24 am, September 2, 2021
 

make the view number zoom when mouse over or active

Lets make the view number in the header widget area a bit more exciting...

Zoom on mouse over with css. 

Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over

Simple change but makes it a bit more interesting. 

HTML

<div class='views-header'><i class="fas fa-eye"></i> 123456</div>

CSS

.views-header {
	transition: all 0.3s;
  	text-align:center;
}
.views-header:hover {
	transition: all 0.3s;
	transform: scale(1.2);
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
123456

View Statistics
This Week
258
This Month
769
This Year
2505

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Even if you fall on your face, you're still moving forward.
Victor Kiam
Random CSS Property

ascent-override

The ascent-override CSS descriptor defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.
ascent-override (@font-face) css reference