Basic example
Use code below to add mask on top of image to provide contrast a proper contrast.
<div
class="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="max-w-xs" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
</div>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Color
By manipulating classes you can change the color and opacity of the mask.
<div class="grid grid-cols-3 gap-4">
<div class="mb-4">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-indigo-700 bg-fixed opacity-50"></div>
</div>
</div>
<div class="mb-4">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-purple-700 bg-fixed opacity-50"></div>
</div>
</div>
<div class="mb-4">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-green-700 bg-fixed opacity-50"></div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="mb-4 md:mb-0">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-red-700 bg-fixed opacity-50"></div>
</div>
</div>
<div class="mb-4 md:mb-0">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-white bg-fixed opacity-50"></div>
</div>
</div>
<div class="mb-4 md:mb-0">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-blue-300 bg-fixed opacity-50"></div>
</div>
</div>
</div>
Gradient
You can even use a fancy gradient as a mask.
<div
class="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="max-w-xs" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-70"></div>
</div>
Opacity
By changing the class you can manipulate the opacity of the mask.
<div class="grid grid-cols-3 gap-4">
<div class="mb-4">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-10"></div>
</div>
</div>
<div class="mb-4">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-30"></div>
</div>
</div>
<div class="mb-4">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-50"></div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="mb-4 md:mb-0">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-70"></div>
</div>
</div>
<div class="mb-4 md:mb-0">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-80"></div>
</div>
</div>
<div class="mb-4 md:mb-0">
<div
class="relative w-full overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black bg-fixed opacity-90"></div>
</div>
</div>
</div>
Content
The main purpose of the mask is to provide an appropriate contrast between the image and its content. The most common use of masks is to put text on an image.
Can you see me?
<div
class="relative max-w-xs overflow-hidden bg-cover bg-[50%] bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="max-w-xs" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: hsla(0, 0%, 0%, 0.6)">
<div class="flex h-full items-center justify-center">
<p class="text-white opacity-100">Can you see me?</p>
</div>
</div>
</div>
Ripple
You can easily add a ripple effect to the image with a mask.
<div class="grid grid-cols-2 gap-4">
<div>
<div
class="relative w-full overflow-hidden bg-cover bg-no-repeat"
data-te-ripple-init
data-te-ripple-color="light">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: hsla(0, 0%, 98%, 0.6)"></div>
</div>
</div>
<div>
<div
class="relative w-full overflow-hidden bg-cover bg-no-repeat"
data-te-ripple-init>
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="w-full" />
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: hsla(0, 0%, 0%, 0.6)"></div>
</div>
</div>
</div>
Link regular
Wrap a mask to change the image into a clickable link.
Use regular link to get image with ripple without additional effect.
<div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="max-w-xs" />
<a href="#!">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-neutral-900 bg-fixed opacity-60"></div>
</a>
</div>
Link with ripple
Add data-te-ripple-init utility with image to achieve an
additional ripple effect.
<div
class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat"
data-te-ripple-init
data-te-ripple-color="light">
<img
src="https://tecdn.b-cdn.net/img/Photos/Others/mewa.jpg"
class="max-w-xs" />
<a href="#!">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-neutral-200 bg-fixed opacity-60"></div>
</a>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Related resources
Tutorials:
colors
hover state
fullscreen background image
masks
hsla colors
ripple effect
carousel
rounded corners
shadows
sizing
Extended Docs:
colors
hover effects
images
shadows
headers
carousel
gallery
jumbotron
video
video carousel
ripple
background image
background position
colors
gradient text
opacity
parallax