- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Smita Kapse](https://www.tutorialspoint.com/assets/profiles/13597/profile/60_103706-1512718957.jpg)
103 Views
Use the transition-delay property to delay the transition effect with CSS. You can try to run the following code to set a 1 second delay of transition:ExampleLive Demo div { width: 150px; height: 150px; background: blue; transition: width 3s; transition-delay: 1s; } div:hover { width: 250px; } Heading One Hover over the below box to change its width. It begins with a delay of 1 second.
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
59 Views
Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are ease, ease-in, ease-out, linear, etc.You can try to run the following code to set the speed curve of the transition effect with CSSExampleLive Demo div { width: 100px; height: 100px; background: red; transition: width 4s; } #effect1 { transition-timing-function: linear; } #effect2 { transition-timing-function: ease-in; } div:hover { width: 250px; } Transition Effect Hover over the div elements and see the transition effect and the speed: linear effect ease-in effect
![Anvi Jain](https://www.tutorialspoint.com/assets/profiles/13591/profile/60_98631-1512716973.jpg)
69 Views
To select elements, use the element selector. You can try to run the following code to select elements:ExampleLive Demo p { color: blue; background-color: orange; } Demo Website Learning Tutorials on web dev, programming, database, networking, etc. Every tutorials has lessons with illustrations and figures.
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
111 Views
To set right tooltip, use the left CSS property.You can try to run the following code to set right tooltip to a textExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
5K+ Views
To position tooltips correctly, use the right, left, top and bottom properties.Let us see how to position tooltips on the right:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; top: -6px; left: 100%; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
299 Views
You can try to run the following code to create a tooltip visible on mouse over. Use the visibility propertyExampleLive demo #mytooltip #mytext { visibility: hidden; width: 100px; background-color: black; color: #fff; text-align: center; border-radius: 3px; padding: 10px 0; position: absolute; z-index: 1; } #mytooltip:hover #mytext { visibility: visible; } Hover the mouse over me My Tooltip text
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
140 Views
A tooltip is visible when a user moves the mouse cursor on a text. You can add information in it to make it easy for users to understand.ExampleYou can try to run the following code to learn how to create tooltip −Live Demo #mytooltip #mytext { visibility: hidden; width: 100px; background-color: black; color: #fff; text-align: center; border-radius: 3px; padding: 10px 0; position: absolute; z-index: 1; } #mytooltip:hover #mytext { visibility: visible; } Hover the mouse over me My Tooltip text
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
255 Views
Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to achieve thisExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
73 Views
Use the animation-fill-mode property to set a style for the element when the animation is not playingExampleLive Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; animation-fill-mode: backwards; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 200px; background-color: blue;} }
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
169 Views
To select all elements, use the * CSS Selector. You can try to run the following code to select all the elements,ExampleLive Demo *{ color: blue; background-color: orange; } Demo Website Learning Tutorials on web dev, programming, database, networking, etc. Every tutorials has lessons with illustrations and figures.