How can i achieve same result using Tailwind css.
it should show only elementary, when i hover over it should show white border and white text.
working example: https://times2.org/home
Asked
Active
Viewed 1,816 times
0
Fayakon
- 1,173
- 4
- 23
- 48
-
There is a lot going on in your working example: the text transition up, the lines animating outwards, text fading in etc. Which part exactly are you trying to replicate that does not already work in your provided code? – ptts Aug 30 '21 at 10:23
-
can we achieve same result using tailwind? i get the text part on hover, but how can i show border inside the image on hover? also color overlay on image – Fayakon Aug 30 '21 at 10:27
-
Are you asking how to add a border to an element on hover? You've already worked with `group-hover` in your code which allows you to conditionally add classes based on hovering of a parent element. To add a border to the same element you're hovering, you can use `hover:border hover:border-red-500` – ptts Aug 30 '21 at 10:29
-
but i want to show border Inside image on color as given in example – Fayakon Aug 30 '21 at 10:35
-
The color over the image is the image in the example you provided. They have the color overlay baked into the images. The border can be done with an absolutely positioned child element given a border, just add relative to the parent. – JHeth Aug 30 '21 at 19:17
-
can you please send fiddle – Fayakon Aug 30 '21 at 19:18