From a5a12c76a1aab0ac4934779de221bd368393badd Mon Sep 17 00:00:00 2001 From: prat1k-gupta Date: Sat, 15 Oct 2022 20:26:50 +0530 Subject: [PATCH 1/2] added the text hover effect --- CSS text hover effect/index.html | 17 ++++++++++++++++ CSS text hover effect/style.css | 33 ++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 CSS text hover effect/index.html create mode 100644 CSS text hover effect/style.css diff --git a/CSS text hover effect/index.html b/CSS text hover effect/index.html new file mode 100644 index 0000000..f053f25 --- /dev/null +++ b/CSS text hover effect/index.html @@ -0,0 +1,17 @@ + + + + + + + + hover effect + + +
+

+ There were a variety of ways to win the game. James had played it long enough to know most of them and he could see what his opponent was trying to do. There was a simple counterattack that James could use and the game should be his. +

+
+ + \ No newline at end of file diff --git a/CSS text hover effect/style.css b/CSS text hover effect/style.css new file mode 100644 index 0000000..b17c01f --- /dev/null +++ b/CSS text hover effect/style.css @@ -0,0 +1,33 @@ +body{ + background-color: #0093E9; + background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); + margin: 0; + height: 100vh; + overflow: hidden; + font-family: 'Monsterrat',sans-serif; +} +.container{ + padding: 7px; + margin: 240px auto; + width: 70%; + border: 2px solid white; + border-radius: 5px; +} +p{ + color: white; + text-align: center; + line-height: 1.5; +} +.effect{ + background-image: linear-gradient(90deg,red,blue); + background-size: 0% 4px; + background-repeat: no-repeat; + background-position: left bottom; + text-decoration: none; + font-weight: bold; + color: white; + transition: background-size 300ms linear; +} +.effect:hover{ + background-size: 100% 4px; +} \ No newline at end of file From 520daf70652072f82f49350f180df0a91d7cce34 Mon Sep 17 00:00:00 2001 From: prat1k-gupta Date: Sat, 15 Oct 2022 23:20:33 +0530 Subject: [PATCH 2/2] added readme --- CSS text hover effect/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 CSS text hover effect/README.md diff --git a/CSS text hover effect/README.md b/CSS text hover effect/README.md new file mode 100644 index 0000000..7a3dd5a --- /dev/null +++ b/CSS text hover effect/README.md @@ -0,0 +1,8 @@ +## Multicolor underline hover effect + +![image](https://user-images.githubusercontent.com/92115707/196000815-8f2a291c-ae81-45c5-97a5-d948050ce664.png) + +A cool multicolor underline hover effect + +Use it to highlight important term or quote. +