Topic: Is hover not working ?
Nishant Pathare
free
asked 6 years ago
<View overlay="red-strong">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(7).jpg" className="img-fluid" alt="" />
<Mask className="flex-center">
<p className="white-text">Strong overlay</p>
</Mask>
</View>
albidda
free
answered 6 years ago
Just for help
<View hover>
<img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg"
className="img-fluid"
alt=""
/>
<Mask className="flex-center" overlay="red-strong">
<p className="white-text">Strong overlay</p>
</Mask>
</View>
Jakub Mandra staff commented 6 years ago
Thanks, code pasting was suffering some errors. Now this should work well :)
Jakub Mandra
staff
answered 6 years ago
<View hover> <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" className="img-fluid" alt="" /> <MaskclassName="flex-center"overlay="red-strong"> <pclassName="white-text">Strong overlay</p> </Mask> </View>
Gaini free commented 5 years ago
Hi! I tried to use the code, but it seems that it does not work. There was just an image and "Strong overlay" text under the image and no hover effect.
Jakub Mandra staff commented 5 years ago
Have you tried to follow the documentation? https://mdbootstrap.com/docs/react/css/hover-effects/
This code here could be outdated (it was posted 5months ago).
If this still not work, be sure to fulfill all the steps of mdbreact installation https://mdbootstrap.com/docs/react/getting-started/quick-start/ (there is a part about installation in the existing project).
Best,
Jakub
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.1
- Device: Lenovo
- Browser: Firefox
- OS: Windows 8.1
- Provided sample code: No
- Provided link: No