Hello , in this post i want to tell you how you should Hover a text , image , background ... in CSS
what is hover meaning?
it means when you go on that element it changes. like "width,height,rotate"
1. First need a class for element
2. now we make it hover
if you want to hover any type of tag or element , choose a class for it and do it.
how to make hover timing?
for this you can use "transitionnumber)s" CSS.
what is hover meaning?
it means when you go on that element it changes. like "width,height,rotate"
1. First need a class for element
Code:
<html>
<head>
<style>
</style>
</head>
<body>
// Paragraph
<p class="para"> Hello World </p>
</body>
</html>
2. now we make it hover
Code:
<html>
<head>
<style>
.class {font-size:10px;}
// When we hover mouse on paragraph it goes bigger
.class:hover {font-size:15px;}
</style>
</head>
<body>
// Paragraph
<p class="para"> Hello World </p>
</body>
</html>
if you want to hover any type of tag or element , choose a class for it and do it.
how to make hover timing?
for this you can use "transitionnumber)s" CSS.
Code:
<html>
<head>
<style>
.img {transition:1s;}
.img:hover {width:200px;height:300px;transition:1s;}
</style>
</head>
<body>
// Image
<img src="image.png" class="img">
</body>
</html>