Conceal the content in order to determine the height of images displayed next to each

I am working on a layout where there are rows with images in the left column and text in the right column. The images have a ratio of 16:9. In case the text becomes too long, I would like to show only a portion of it with a gradient mask and provide a "Read more" button. Here is the current layout compared to the desired layout:

https://i.sstatic.net/ufMqA.jpg

Implemented using Bootstrap 4 alpha 6.

Codepen

.bg-gray-950 {
  background-color: #fafafa;
}

.bg-gradient-red-green {
  background: linear-gradient(45deg, #4cad9e, #b34b4b);
  color: #fff;
}

.img-overlay {
  width: 100%;
  height: 100%;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #000000, #dc4425);
    opacity: .3;
  }
}

body {
  min-height: 100vh;
  background: rgba(33, 66, 99, 0.8);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container m-5">
  <div class="row bg-gray-950 d-flex">
    <div class="col-md-6 p-0 img-overlay">
      <img src="https://losol.no/wp-content/uploads/2017/06/20170502-2054-hovland-05091.jpg" class="img-fluid">
    </div>
    <div class="col-md-6 ">
      <div class="card-block">
        <h4 class="card-title">Lorem hipster dolor ipsum sit amet</h4>
        <p class="card-text">Dreamcatcher kombucha drinking vinegar cold-pressed hoodie craft beer literally blog microdosing trust organic flannel blue bottle fingerstache. Blog skateboard cronut chips brunch pug. Heirloom coloring book, pitchfork flannel bicycle rights
          deep v meditation. </p>
        <a href="#" class="btn btn-outline-primary rounded-0"><i class="fa fa-share" aria-hidden="true"></i> Read more</a>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

Kindly note that this answer is not exhaustive. It primarily focuses on the text transparency and may not address all content-related aspects. The provided example code is incomplete.

To achieve the desired effect, you can include the following CSS:

-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));

Add this to your text class for the intended outcome.

Seems straightforward, doesn't it? Well, not quite.

This solution may not be compatible with IE or Edge, but having an 89% support rate isn't bad at all.

.bg-gray-950 {
  background-color: #fafafa;
}

.bg-gradient-red-green {
  background: linear-gradient(45deg, #4cad9e, #b34b4b);
  color: #fff;
}

.img-overlay {
  width: 100%;
  height: 100%;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #000000, #dc4425);
    opacity: .3;
  }
}

body {
  min-height: 100vh;
  background: #5f514c !important;
}



.card-text {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<body>
  <div class="container m-5">
    <div class="row bg-gray-950 d-flex">
      <div class="col-md-6 p-0 img-overlay">
        <img src="https://losol.no/wp-content/uploads/2017/06/20170502-2054-hovland-05091.jpg" class="img-fluid">
      </div>
      <div class="col-md-6 ">
        <div class="card-block">
          <h4 class="card-title">Lorem hipster dolor ipsum sit amet</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, reque urbanitas est at. Graeci eloquentiam nam ad. Vix ut laudem aperiam accumsan, ut illum ubique feugait mel, munere incorrupte usu eu. At his cibo suscipit. His ex nobis scaevola.
Qui ex mundi inimicus iracundia. Ne eruditi noluisse est, mei unum apeirian te, mucius accusata ne qui. Aliquid ancillae conceptam sed ex. Ius semper aperiri te</p>
          <a href="#" class="btn btn-outline-primary rounded-0"><i class="fa fa-share" aria-hidden="true"></i> Read more</a>
        </div>
      </div>
    </div>
  </div>
</body>

Answer №2

To achieve the desired layout, ensure that the text div matches the height of the image by setting its height to 0 and using padding-top: 56.25% for a 16:9 ratio. Next, place the button within a div along with the gradient and position it absolutely at the bottom of the div.

For a demonstration, refer to this example:

.wrapper {
  width: 1280px;
  margin: auto;
}

.wrapper > img {
  float: left;
}

.textdiv {
  width: 640px;
  float: left;
  font-size: 20px;
  overflow: hidden;
}

.textdiv__inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

.text {
  position: absolute;
  top: 0;
  
}

.button-wrapper {
  position: absolute;
  bottom: 0;
  padding: 50px 0 10px;
  width: 100%;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.0) 0%, #fff 50%, #fff 100%);
}
<div class="wrapper">
  <img src="http://via.placeholder.com/640x360" alt="" />
  <div class="textdiv">
    <div class="textdiv__inner">
      <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit... (content continues)
      </p>
      <div class="button-wrapper">
        <button>read more</button>
      </div>
    </div>
  </div>
</div>

Answer №3

Thank you so much for your assistance! Here is the finalized code, just sharing it here in case someone else comes across it while searching online.

  

.bg-gradient-wipe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: -webkit-linear-gradient(transparent 50%, #fff 75%);
  background: linear-gradient(transparent 50%, #fff 75%);
}

.btn-fixed-bottom {
  position: absolute;
  bottom: 10px;
}

.bg-gray-950 {
  background-color: #fafafa;
}

.img-overlay {
  width: 100%;
  height: 100%;
}
.img-overlay:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -webkit-linear-gradient(top left, #000000, #dc4425);
  background-image: linear-gradient(to bottom right, #000000, #dc4425);
  opacity: .3;
}

body {
  min-height: 100vh;
  background: #336699!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<div class="container m-5">
  <div class="row bg-gray-950 d-flex">
    <div class="col-md-6 p-0 img-overlay">
      <img src="https://losol.no/wp-content/uploads/2017/06/20170502-2054-hovland-05091.jpg" class="img-fluid">
    </div>
    <div class="col-md-6 embed-responsive embed-responsive-16by9">
      <div class="embed-responsive-item p-3">
        <div class="bg-gradient-wipe"></div>
        <h4>Lorem hipster dolor ipsum sit amet</h4>
        <p>Dreamcatcher kombucha drinking vinegar cold-pressed hoodie craft beer literally blog microdosing trust organic flannel blue bottle fingerstache. Blog skateboard cronut chips brunch pug. Heirloom coloring book, pitchfork flannel bicycle rights deep v meditation. </p>

        <a href="#" class="btn btn-fixed-bottom btn-outline-primary rounded-0"><i class="fa fa-share" aria-hidden="true"></i> Read more</a>

      </div>
    </div>
  </div>
</div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a corner box feature to bring attention to the typed.js functionality

I have successfully integrated typed.js into my project and now I am looking to replicate the highlighted text with an excel-like box in one corner. I've managed to get the text typing out while also adding an SVG for the box in HTML, but I'm hav ...

javascriptjqueryhtmlcss

Can you explain the conflict between using float and setting the height to 100% for divs?

Check out the following HTML code example: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> html, body { padding: 0; m ...

htmlcssheight

label bootstrap circular navigation

/* ========================================================================== 7. How It Works Section ========================================================================== */ .how-it-works { background: #f5f5fa; padding-bottom: 30px; } .board{ ...

htmlcsstwitter-bootstrap-3bootstrap-4

Optimizing Angular for search engines: step-by-step guide

Regarding Angular SEO, I have a question about setting meta tags in the constructors of .ts files. I have implemented the following code: //To set the page title this.titleServ.setTitle("PAGE TITLE") //To set the meta description this.meta.addTag ...

javascripthtmlangulartypescriptseo

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

Only one instance of a div with a table cell will function properly

I am facing an issue where I created a div with display:table-cell; and it appears as shown in the first picture, which is what I want. However, when I add another div, it changes to look like the second picture. All I want is for the text to be in the mid ...

htmlcss

How to utilize flexbox for rearranging content in Bootstrap 4

Currently in the process of developing a website that includes a team section designed to resemble the following: https://i.sstatic.net/xHE3y.png Here is the current scss file being used: .team-member-card { &__text-content { background-color: ...

csstwitter-bootstrapbootstrap-4

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...

cssinstallationlesshttp-status-code-403

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Change the P element to a Span element while maintaining the existing content using the replaceWith

I'm having trouble replacing a p tag with a span while keeping the actual content intact. Can anyone assist me with this, please? $('.anim-letters p').replaceWith( "<span class='letters'>" + $('this').text() + "< ...

jqueryhtmlreplacewith

Strategies for smoothly navigating the page to a specific div every time

Currently, I am working on a form that requires submitting multiple child forms. To enhance user experience, I have incorporated jQuery functionality to display a message at the top of the page upon each submission. Now, my goal is to implement a feature w ...

javascriptjqueryhtmlcss

Creating a personalized layout for your WordPress posts with custom card designs

As a new developer diving into the world of WordPress, I am aiming to create a sleek and minimalistic grid/card layout for my website. Struggling to achieve this, I seek guidance on how to replicate the design seen in the following link: desired result H ...

csswordpressbootstrap-4customizationgrid-layout

Sort the data - a selection menu is included in each row of the table

My issue involves a datatable where each row must have a select item with multiple options to choose from. The goal is to filter the rows based on the selected option when using the default search bar located above the table. However, I've encountered ...

javascripthtmldatatablefiltering

Tips for placing an icon within an input field

I'm struggling to place an icon inside an input tag, but it always appears at the bottom of the input. I initially tried using Bootstrap, but I ended up resorting to custom styles for this specific issue. Here's the HTML code: <d ...

cssbootstrap-4font-awesomelaravel-blade

Embedding a picture within a uniquely shaped container

I have multiple sets of skewed divs and I would like to include a separate image in each of them. However, when I attempt to insert an image, it also becomes skewed and distorted. Is there a way to prevent this from happening? Ideally, I want the images to ...

htmlcss

Synchronizing CSS3 Animation Events and Event Listeners in jQuery: A Complete Guide

I've been exploring different ways to utilize CSS3 Animation Events and Event Listeners across browsers for more precise control over CSS3 animations. While I know it's possible, I'm struggling to implement it due to my current limitations d ...

jquerycssanimation

Ways to prevent an element from displaying a hover border or outline

I need help with styling a group of 50% width elements that are displayed next to each other. I want to add a 20px white border around each element to create a separation between them. This is necessary because I have a responsive layout and always require ...

htmlcss

The issue with `nth-of-type` not properly functioning within a list

I am having trouble altering the background of my divs when they are contained within an li element. It seems that the problem may be related to the arrangement of my elements. <ul class="featured-items"> <li><div class="inner">& ...

htmlcsscss-selectors

What is the best way to show the current date and time in an Angular template while ensuring it stays up to

I'm looking to showcase the current date and time in my angular template, and have it automatically refresh when the time changes. The desired application LOOKS as follows: This snippet is from my .html template: <div class="top-right pull-right ...

javascripthtmlangularangular-template

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss