For creative portfolios, you often want a clean visual interface where text details only appear when the user expresses interest.

To solve this, use Div Render Container Slider for Elementor.

Step 1: The Hover Card

Create a child Container.
1. Background: Set the portfolio image as the background.
2. Overlay: Add an Inner Container inside it with a dark background color (e.g., black with 80% opacity).
3. Content: Add Project Title and Link inside the Inner Container.
4. CSS/Motion: Use Elementor’s “Custom CSS” or “Motion Effects” to set the Inner Container’s opacity to 0 by default, and 1 on Hover.

Step 2: Slider Settings

Enable Slider Mode.

  • Slides Per View: 3 (Desktop) / 1 (Mobile).
  • Grab Cursor: Yes.
  • Space Between: 0. Connecting the images seamlessly can look very modern.

Pro Tips for Interaction

  • Mobile Fallback: Hover doesn’t exist on mobile. Use a media query in your CSS to force the text overlay to be always visible (or visible on tap) on screens smaller than 768px.
    @media (max-width: 768px) { selector .inner-container { opacity: 1 !important; } }