Is hover not working ?

Topic: Is hover not working ?

Nishant Pathare free asked 5 years ago

i copied the same code that is available in mdb react -> CSS -> hover effect ..Somehow its not working. Its not even a premium module.

<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>

Add comment

albidda free answered 5 years ago

0 0 Best answer

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 5 years ago

Thanks, code pasting was suffering some errors. Now this should work well :)

Add comment

Jakub Mandra staff answered 5 years ago

1 0 Best answer

Hey there, We are sorry, looks like docs needs to be updated (fortunately we are currently rebuilding the whole documentation). Here is the working example:

<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

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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

Nishant Pathare

5Support score
1Questions 0Answers 0Snippets