Is hover not working ?

Topic: Is hover not working ?

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

Jakub Mandra staff premium answered 6 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 commented 6 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 premium commented 6 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

Add comment

albidda answered 6 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 premium commented 6 years ago

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

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

User: 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 likes 0Snippets