Change the image's background to a blend of transparent and white as it transitions through CSS

My Video Gallery code is almost fully functional, but there's a slight black gap before the image on hover. Is there a way to remove or change this color?

https://i.sstatic.net/T6h8U.png

I'd like to maintain the transition and background color.

Here is the code pen: https://codepen.io/wavyblues/pen/poyBbeL

<!DOCTYPE html>
<title>My Example</title>

<style>
  .video-gallery {
  position: relative;
  margin: 0 auto;
  max-width: 1300px;
  text-align: center;
}

.video-gallery .gallery-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  /* min-width: 500px;
  max-width: 800px;
  max-height: 360px; */
  width: 48%;
  background: #000;
  cursor: pointer;
}

.video-gallery .gallery-item img {
  position: relative;
  display: block;
  opacity: .45;
  width: 100%;
  height: 300px;

  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-20px, 0, 0);
  backface-visibility: hidden;
}

.video-gallery .gallery-item .gallery-item-caption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
}

.video-gallery .gallery-item .gallery-item-caption,
.video-gallery .gallery-item .gallery-item-caption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-gallery .gallery-item h2 {
  font-weight: 300;
  overflow: hidden;
  padding: 0.5em 0;
}


.video-gallery .gallery-item h2,
.video-gallery .gallery-item p {
  position: relative;
  margin: 0;
  z-index: 10;
}

.video-gallery .gallery-item p {
  letter-spacing: 1px;
  font-size: 68%;

  padding: 1em 0;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(10%, 0, 0);
}

.video-gallery .gallery-item:hover img {
  opacity: .3;
  transform: translate3d(0, 0, 0);

}

.video-gallery .gallery-item .gallery-item-caption {
  text-align: left;
}

.video-gallery .gallery-item h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 1px;
  background: #fff;

  transition: transform 0.3s;
  transform: translate3d(-100%, 0, 0);
}

.video-gallery .gallery-item:hover h2::after {
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 50em) {
  .video-gallery .gallery-item {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}

</style>
<div class="content">
  <h1 class="section-header">Video Gallery</h1>
  <div class="section-header-underline"></div>
  <div class="video-gallery">
    <div class="gallery-item">
      <img src="https://cdn.collider.com/wp-content/uploads/2010/06/inception_movie_poster_banner_04.jpg">
      <div class="gallery-item-caption">
        <div>
          <h2>Inception</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item ">
      <img src="https://cdn.collider.com/wp-content/uploads/2012/05/dark-knight-rises-movie-poster-banner-catwoman.jpg" alt="Mt. Rainier">
      <div class="gallery-item-caption">
        <div>
          <h2>Dark Knight</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item">
      <img src="https://i.imgur.com/rD8Unfk.jpg" alt="Olympic National Park">
      <div class="gallery-item-caption">
        <div>
          <h2>Warcraft</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item">
      <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fscottmendelson%2Ffiles%2F2017%2F07%2FJustice-League-SDCC-Banner.jpg" alt="Mount St. Helens">
      <div class="gallery-item-caption">
        <div>
          <h2>Justice League</h2>
          <p></p>
        </div>
      </div>
    </div>

  </div>
</div>

htmlcss

Answer №1

The reason you may be facing challenges with this task is because the black background is actually part of the container, while the transition is being applied directly to the image itself. This causes the image to work independently from the black background.

To solve this issue, you can place the image in its own container with a black background and then apply the transition to that container.

Here is an example of how you can make it work:

.video-gallery {
  position: relative;
  margin: 0 auto;
  max-width: 1300px;
  text-align: center;
}

.video-gallery .gallery-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  /* min-width: 500px;
  max-width: 800px;
  max-height: 360px; */
  width: 48%;
  cursor: pointer;
}

.video-gallery .gallery-item-img {
  width: 100%;
  height: 300px;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-20px, 0, 0);
  backface-visibility: hidden;
  background: #000;
}

.video-gallery .gallery-item img {
  position: relative;
  display: block;
  opacity: .45;
  width: 100%;
  height: 300px;
}

.video-gallery .gallery-item .gallery-item-caption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
}

.video-gallery .gallery-item .gallery-item-caption,
.video-gallery .gallery-item .gallery-item-caption>a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-gallery .gallery-item h2 {
  font-weight: 300;
  overflow: hidden;
  padding: 0.5em 0;
}

.video-gallery .gallery-item h2,
.video-gallery .gallery-item p {
  position: relative;
  margin: 0;
  z-index: 10;
}

.video-gallery .gallery-item p {
  letter-spacing: 1px;
  font-size: 68%;
  padding: 1em 0;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(10%, 0, 0);
}


.video-gallery .gallery-item:hover .gallery-item-img {
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover img {
  opacity: .3;
}

.video-gallery .gallery-item .gallery-item-caption {
  text-align: left;
}

.video-gallery .gallery-item h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 1px;
  background: #fff;
  transition: transform 0.3s;
  transform: translate3d(-100%, 0, 0);
}

.video-gallery .gallery-item:hover h2::after {
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 50em) {
  .video-gallery .gallery-item {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}
<div class="content">
  <h1 class="section-header">Video Gallery</h1>
  <div class="section-header-underline"></div>
  <div class="video-gallery">
    <div class="gallery-item">
      <div class="gallery-item-img">
        <img src="https://cdn.collider.com/wp-content/uploads/2010/06/inception_movie_poster_banner_04.jpg">
      </div>
      <div class="gallery-item-caption">
        <div>
          <h2>Inception</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item ">
      <div class="gallery-item-img">
        <img src="https://cdn.collider.com/wp-content/uploads/2012/05/dark-knight-rises-movie-poster-banner-catwoman.jpg" alt="Mt. Rainier">
      </div>
      <div class="gallery-item-caption">
        <div>
          <h2>Dark Knight</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item">
      <div class="gallery-item-img">
        <img src="https://i.imgur.com/rD8Unfk.jpg" alt="Olympic National Park">
      </div>
      <div class="gallery-item-caption">
        <div>
          <h2>Warcraft</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item">
      <div class="gallery-item-img">
        <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fscottmendelson%2Ffiles%2F2017%2F07%2FJustice-League-SDCC-Banner.jpg" alt="Mount St. Helens">
      </div>
      <div class="gallery-item-caption">
        <div>
          <h2>Justice League</h2>
          <p></p>
        </div>
      </div>
    </div>

  </div>
</div>

To implement these changes, follow the steps below:

  1. Add the images to a container div with the class gallery-item-img, for example:
<div class="gallery-item">
  <div class="gallery-item-img">
    <img src="https://www.example.com/image.jpg">
  </div>
  REST OF THE ITEM HERE....
</div>
  1. Move the black background and transition properties to this class:
.video-gallery .gallery-item-img {
  background: #000;
  width: 100%;
  height: 300px;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-20px, 0, 0);
  backface-visibility: hidden;
}

.video-gallery .gallery-item:hover .gallery-item-img {
  transform: translate3d(0, 0, 0);
}
  1. Specify the height, width, and opacity of the image itself:
.video-gallery .gallery-item img {
  display: block;
  opacity: .45;
  width: 100%;
  height: 300px;
}
.video-gallery .gallery-item:hover img {
  opacity: .3;
}

Answer №2

Eliminate the -20px offset from your transform. Modify 

transform: translate3d(-20px, 0, 0);
to transform: translate3d(0, 0, 0);

  .video-gallery {
  position: relative;
  margin: 0 auto;
  max-width: 1300px;
  text-align: center;
}

.video-gallery .gallery-item {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  /* min-width: 500px;
  max-width: 800px;
  max-height: 360px; */
  width: 48%;
  background: #000;
  cursor: pointer;
}

.video-gallery .gallery-item img {
  position: relative;
  display: block;
  opacity: .45;
  width: 100%;
  height: 300px;

  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.video-gallery .gallery-item .gallery-item-caption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
}

.video-gallery .gallery-item .gallery-item-caption,
.video-gallery .gallery-item .gallery-item-caption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-gallery .gallery-item h2 {
  font-weight: 300;
  overflow: hidden;
  padding: 0.5em 0;
}


.video-gallery .gallery-item h2,
.video-gallery .gallery-item p {
  position: relative;
  margin: 0;
  z-index: 10;
}

.video-gallery .gallery-item p {
  letter-spacing: 1px;
  font-size: 68%;

  padding: 1em 0;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(10%, 0, 0);
}

.video-gallery .gallery-item:hover img {
  opacity: .3;
  transform: translate3d(0, 0, 0);

}

.video-gallery .gallery-item .gallery-item-caption {
  text-align: left;
}

.video-gallery .gallery-item h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 1px;
  background: #fff;

  transition: transform 0.3s;
  transform: translate3d(-100%, 0, 0);
}

.video-gallery .gallery-item:hover h2::after {
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 50em) {
  .video-gallery .gallery-item {
    display: inline-block;
    float: none;
    margin: 10px auto;
    width: 100%;
  }
}
<!DOCTYPE html>
<title>My Example</title>

<div class="content">
  <h1 class="section-header">Video Gallery</h1>
  <div class="section-header-underline"></div>
  <div class="video-gallery">
    <div class="gallery-item">
      <img src="https://cdn.collider.com/wp-content/uploads/2010/06/inception_movie_poster_banner_04.jpg">
      <div class="gallery-item-caption">
        <div>
          <h2>Inception</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item ">
      <img src="https://cdn.collider.com/wp-content/uploads/2012/05/dark-knight-rises-movie-poster-banner-catwoman.jpg" alt="Mt. Rainier">
      <div class="gallery-item-caption">
        <div>
          <h2>Dark Knight</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item">
      <img src="https://i.imgur.com/rD8Unfk.jpg" alt="Olympic National Park">
      <div class="gallery-item-caption">
        <div>
          <h2>Warcraft</h2>
          <p></p>
        </div>
      </div>
    </div>

    <div class="gallery-item">
      <img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fscottmendelson%2Ffiles%2F2017%2F07%2FJustice-League-SDCC-Banner.jpg" alt="Mount St. Helens">
      <div class="gallery-item-caption">
        <div>
          <h2>Justice League</h2>
          <p></p>
        </div>
      </div>
    </div>

  </div>
</div>

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

How can images be concealed while displaying text only during the printing of a page by the user?

I am currently working on creating a print CSS file. My goal is to hide the header image div located at the top of the page while still keeping the text inside it visible. I want to ensure that there is no empty space left for the div on the page. This CSS ...

htmlcsstextprinting

Creating a unique store previewer customization

Are there any JavaScript libraries available to simulate the CSS image-mask property since it is not widely supported by browsers? I've been experimenting with creating a white image containing transparent areas in the shape of the design elements I w ...

cssimagehtml

Creating tags in HTML and displaying them on a webpage

I have a code that sends a message from a textarea after completion tags are entered as I wrote. The desired output should be: <h1> Thanks </h1> The expected output is: Transmitter Thanks instead of <h1> Thanks </h1> ...

javascriptjqueryhtmlcss

Search for styling cues within the text and transform them into distinct elements

I was inspired to develop a unique text editor that utilizes cues within the text, such as :strong:, to set formatting rules. Here is the code snippet I have so far: <?php $document = $_GET["document"]; $user = $_GET["user"]; if ($user != n ...

javascriptjqueryhtmlcss

issues with image tags using Angular

Having trouble loading a jpg logo in an angular app using the <img> tag in the HTML of header component. Interestingly, when clicking on the path in VS CODE it leads to the image, but on the browser, I encounter a 404 error. This is the code snippet ...

htmlangulardirectory-structure

Dealing with href problems while parsing HTML in a React application

I'm currently facing a challenge with parsing HTML received from an API. Despite trying dangerouslySetInnerHTML, react-html-parser, and html-react-parser, all three methods are adding unwanted line breaks before and after <a href. Here is an examp ...

htmlreactjsparsing

Attempting to retrieve data from an HTML response using Node.js

My goal is to extract the Email ([email protected]) from the HTML response using cheerio and puppeteer modules. However, I am retrieving unnecessary information which I do not need at all. It is located within the Class p2 in td/tr. when passing tr a ...

javascripthtmlnode.jspuppeteercheerio

Using Reactjs: How do you insert HTML code into the primaryText of a list item?

Is it possible to include a span element inside a ListItem like so: <ListItem primaryText={"<span class='inner'>Some important info</span>" + item.title} /> When I view the rendered content, the output is not an HTML span ...

htmlreactjsmaterial-uilistitem

Creating vertical alignment in flexbox

How can I add a vertical line that extends between the sidebar and main content on my website? The border-right in my sidebar only goes partway down, and I need it to go all the way. Any help would be greatly appreciated! Link to code snippet ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

javascripthtmlcss

Is there a way to showcase CSS styling for elements that are "siblings" when hovering over an item without affecting the item being hovered on?

When hovering over one of the 5 text bits, I want to apply CSS to all bits except the one being hovered over. Can you achieve this using jQuery and the .siblings() attribute? Here is the HTML: <table width="1138" height="38" border="0" class="Home111 ...

jquerycss

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

What is the best way to use relative positioning to show two lines of information on an image without the order of information interfering with each other? I want the Files badge to appear at the bottom of the image, with the MusicBrainz and Discogs badge ...

htmlcssbootstrap-4

Should Blogpost Titles Be Automatically Scaled to Fit the Screen Width?

I'm having trouble making the title box auto-width without any success. Unfortunately, I can't share screenshots. Here's my CSS code for the blog post title: section#maincontent header{ position: relative; left: 25px; padding-left: 10px; ba ...

css

Switch between including 'light' or 'dark' styles using Javascript?

I am currently working on a project where I aim to incorporate a dark mode toggle feature. To maintain organization and scalability, I have chosen to implement the SASS (.scss) architecture rather than plain CSS. My plan is to utilize variables within my ...

javascripthtmlcsssass

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: https://i.sstatic.net/ra22j.png ...

csstypescriptreact-reduxbootstrap-4

Exploring the dimensions of elements in Polymer using offsetHeight and offsetWidth

Looking for advice on running a script when the page loads that relies on the offsetHeight and offsetWidth properties of an element. I've tried calling the script within the "ready" and "attached" functions, but it doesn't seem to be running when ...

htmlpolymerpolymer-1.0

In certain cases, webkit browsers may conceal LI A (display:block) elements

I have created a unique menu design that is based on the classic 'ul li' structure, but with 'a' elements set to display:block for precise positioning and sizing. There is also some transform:rotate applied, but this does not affect the ...

cssgoogle-chromemenusafariwebkit

Standalone JSON Hyperlinks within a Table Column

My webpage features a table filled with information from a JSON API. Currently, I am struggling to create unique links in the far right column of the table. The issue is that all rows are linking to the same HTML page (12345), which is not ideal. What I w ...

javascriptjqueryhtmljson

Contrast the objects in views.py between two distinct model objects in Django

I am currently working on a feature that compares the skills required for different job postings (such as web development, marketing, etc) with the skills of a user who is logged in. If there is a match, the job posting will be displayed to the user. The ...

pythonhtmldjangodjango-viewscompare

Inconsistency in css asset URLs across various pages discovered while working with Rails

When using assets stylesheet to load a CSS file, I noticed that it only loads on the index page. Upon inspecting with F12, the console shows the URL for other pages as well, which appends "/cloths" to the asset path. I am currently utilizing the default la ...

htmlcssruby-on-rails-4sass