All Collections
CSS hacks
Create an outstanding hover block
Create an outstanding hover block
Aleks avatar
Written by Aleks
Updated over a week ago
  1. Add a section widget on your page

2. Then, drop an image widget into section widget and upload your image

3. Add an HTML widget to the same section

4. Click on "Edit in HTML editor" button, add your text and click on Save

5. Click on gear button on the section widget, go to Additional CSS option and paste the code below:

.ddr-page-widget__html {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;

    .ddr-widget {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
    }
}

&:hover {
    .ddr-page-widget__html {
          opacity: 1;
      }
}

.ddr-page-widget-overlay-wrapper {
    .ddr-page-widget__html {
        position: relative;

        .ddr-widget {
            position: relative;
            top: 0;
            transform: none;
            left: 0;        
        }
    }
}

Click on Save and publish to the needed option.

The css can be modified to get the required functionality or you may create a Java script with the necessary functionality and add it to the page scripts.

Did this answer your question?