Display widget in text overlay with faded background

• Created : Apr, 2, 2020
• Last Updated: Sep, 12, 2023

Users can now show any RSS feeds in a new style with overlay text and faded background effect view using custom CSS. Previously, users were only able to show images below the text or sidewise as a thumbnail.

Easy Steps

Widget Settings

1. Create widget -> RSS
2. Feed URL -> https://www.wired.com/feed/category/ideas/latest/rss
3. General -> Width -> Responsive/In Pixels -> Responsive
4. General -> Style -> Thumbnail
5. General -> Height -> Posts -> 1
6. General -> Scroll -> ON
7. General -> Scroll -> Horizontal
8. General -> Scroll -> Navigation Arrow -> ON
9. General -> Scroll -> Autoscroll -> ON
10. General -> Advanced Settings -> Custom CSS link -> Show custom css

    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.
    
    /* Copy CSS From Here  */
    #fw-feed-items .fw-feed-item-url[onclick] {
        position: relative;
    }
    .fw-feed-item,.fw-feed-item:hover {
        margin: 0;
        padding: 0;
        clear: both;
        border-bottom: 0px dashed #CCCCCC;
    }
    #fw-container{
    	height: 350px;
    }
    .fw-feed-item-content-module {
        margin: 0px;
        padding: 10px;
        overflow: hidden;
        position: absolute;
        top: 0;
        height: 100%;
        background: rgb(255,255,255);
        background: linear-gradient(273deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5130427170868348) 0, rgba(0,0,0,1) 100%);
        width: 100%;
    	padding-top: 75px;
    }
    .fw-feed-item-image {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 350px;
        overflow: hidden;
    }
    span.fw-feed-item-title {
        padding: 10px 0;
    }
    .fw-feed-item-image-module {
        margin: 0 0 0 5px;
        padding: 0;
         float: none;
    }
    
    .fw-feed-item-title,
    .fw-feed-item-description,
    .fw-feed-item-date {
       
        width: 50%;
    
    }
    /*   CSS Ends Here  */
    

Rest keep as default

Related posts

How to Create a Vimeo Video Widget for Your Website – Easy Guide

Contents1 Step 1: Get the Vimeo Video Feed2 Step 2: Create a FeedWind Account3 Step 3: Make Your Vimeo...

Ultimate Bento Design in FeedWind Widgets

Contents1 Why Bento Design?2 Crafting Your Bento Design Style Widget with FeedWind: A Step-by-Step Guide3 Bento Design Style Widget...

Facebook posts: Enhance your brand’s online presence with custom overlay design

Stand Out with Custom Overlay Designs While images play a vital role in catching the eye, the design elements...