To create rollover effect similar to blog/portfolio thumbnails in Avada Theme using Avada Columns, you can follow these steps:

  1. Set Up the Columns and Background Image:
    • Use the Avada Builder to create columns and set a background image for each column.
  2. Add CSS for the Hover Effect:
    • Add custom CSS to achieve the hover effect where the text appears over the image.

Here’s a step-by-step guide:

Step 1: Create the Columns with Background Images

  1. Open the Avada Builder:
    • Create or edit a page using the Avada Builder.
  2. Add a Container and Columns:
    • Add a new container and insert columns as needed.
  3. Set Background Image for Each Column:
    • Edit the column and go to the Design tab.
    • Set the background image for the column.

Step 2: Add HTML Structure

  1. Add Title and Hover Text:
    • Inside each column, add a title and a div for hover text.
<div class="hover-column">
  <h2 class="hover-title">Title Here</h2>
  <div class="hover-text">This is the hover text.</div>
</div>

Step 3: Add Custom CSS

  1. Navigate to Avada Options:
    • Go to Avada > Options > Custom CSS and add the following CSS.
<span style="color: #3366ff;">.hover-column {
position: relative;
width: 100%;
height: 300px; /* Adjust height as needed */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
}

.hover-column .hover-title {
position: absolute;
color: white;
z-index: 2;
font-size: 24px;
font-weight: bold;
}

.hover-column .hover-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
padding: 0 15px; /* Add left and right padding */
}

.hover-column:hover .hover-text {
opacity: 1;
}

.hover-column:hover .hover-title {
opacity: 0;</span>
}

Step 4: Customize as Needed

  • Adjust Dimensions: Modify the width and height of .hover-column to fit your design needs.
  • Fonts and Colors: Customize font sizes, colors, and background overlay colors in the CSS to match your site’s style.

Example Implementation in Avada:

  1. Add a Container and Columns:
    • Create a container with multiple columns in the Avada Builder.
  2. Set Background Images:
    • Edit each column to set the background image.
  3. Add HTML Content:
    • Use a code block or custom HTML element to insert the HTML structure for titles and hover text within each column.

Final Result:

By following these steps, you can achieve a rollover effect similar to the Avada Theme for blog/portfolio thumbnails. This approach allows you to use Avada Columns and set background images, while customizing the hover effect to display text as desired.