Create text overlay widget with CSS

• Created : Jan, 16, 2020
• Last Updated: Dec, 18, 2024

Here’s an example of a widget with text overlay created using CSS.

Follow these steps to create a similar widget for your website.

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 -> Scroll -> Fade Transition -> ON
11. 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-item {
      padding: 0px;
    }
    
    .fw-feed-item:hover {
      padding: 0px;
    }
    
    .fw-feed-item-image-module {
      margin: 0 auto 0px auto;
      padding: 0;
      float: none;
      width: 100%;
      text-align: left;
    }
    
    .fw-feed-item-url {
      position: relative;
    }
    
    .fw-feed-item-image {
      margin: 0 auto;
      padding: 0;
      background-size: cover !important;
      overflow: hidden;
      height: 300px;
      width: 100% !important;
    }
    
    #fw-feed-items .fw-feed-item-description {
      margin: 0 2px 0 0;
      padding: 0 2px 0 0;
      word-wrap: break-word;
      line-height: 1.5;
      font-size: 16px;
      overflow: hidden;
    }
    
    .fw-feed-item-description,
    .fw-feed-item-description img {
      width: 100% !important;
    }
    
    .fw-feed-item-content-module {
      position: absolute;
      margin: 0;
      padding: 10px;
      top: 230px;
      height: 100%;
      background: #000000a6;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      transition: all 0.5s linear;
      width: 100%;
    }
    
    .fw-feed-item-content-module .fw-feed-item-description {
      display: none;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    
    .fw-feed-item:hover .fw-feed-item-title {
      display: none;
    }
    
    .fw-feed-item:hover .fw-feed-item-content-module {
      margin: 0;
      padding: 10px;
      /* overflow: visible; */
      position: absolute;
      top: 0;
      background: #000000a6;
      height: 100%;
      width: 100%;
      left: 0;
    }
    
    .fw-feed-item:hover .fw-feed-item-content-module .fw-feed-item-description {
      display: block;
    }
    /*   CSS Ends Here  */
    

12. Feed Title -> Custom -> ON
13. Feed Title -> Font size -> 16
14. Feed Title -> Colors -> Background color -> #000000
15. Feed Title -> Colors -> Font color -> #FFFFFF
16. Feed Title -> Advanced Settings -> Background Image -> https://ak9.picdn.net/shutterstock/videos/19733719/thumb/1.jpg
17. Feed Content -> Size -> Item title -> 16
18. Feed Content -> Size -> Bold -> OFF
19. Feed Content -> Size -> Content -> 14
20. Feed Content -> Colors -> Title font -> #FFFFFF
21. Feed Content -> Colors -> Content font -> #FFFFFF
22. Feed Content -> Colors -> Background -> #080707
23. Feed Content -> Advanced Settings -> Time/Date -> OFF

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...