Create text overlay widget

  • Created : Jan, 16, 2020
  • Last Updated: Oct, 21, 2022

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
  24. Rest keep as default


Related posts

Sports-widget

Add a Dynamic Sports Widget to Your Website

Contents1 Increase User Engagement1.1 Increased Engagement1.2 Lower Bounce Rates1.3 Level Up User Experience2 How to Add FeedWind Sports 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...

Create widget in Overlay style with linear gradient background

Create widget in Overlay style with linear gradient background

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now