Having issues with custom CSS functioning properly on WordPress sites

I have a customized section on my WordPress page with specific CSS and HTML. You can view the code here:

Upon hovering over the image, the code is designed to display a semi-transparent background.

However, when I implement this code onto my WordPress site, it does not function correctly. The transparent background only covers the area occupied by the text, rather than the entire image as intended.

You can see the issue in action here: It's located in the last section under "Webinar Archive."

What steps should I take to resolve this issue effectively?

htmlcsswordpresshover

Answer №1

It seems like the issue lies in the display:table property, which should be changed to display:block

Try implementing the updated CSS below:

span.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  display:block; /* Changed from display: table */
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

Answer №2

Make sure to swap out

span.text-content{
 display: table;
 ...
}

for

span.text-content{
 display: block;
 ...
}

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

Align title text to the right within the Material Design Card

I have implemented a Material Design (MDL) card to showcase numeric values in the title. However, I am facing an issue where the values are left aligned by default and I want them to be right aligned. Despite trying various styles, they are being ignored ...

cssmaterial-design

The transition effect for the box shadow is being altered to modify the dimensions

--- UPDATE 2 ---- Here is a different example video showcasing the bizarre behavior of my react application. I am struggling to identify the root cause of this issue. See the issue in action I have a div with the class name side-btn It contains an anim ...

cssreactjs

Editing HTML on an ASPX website can be a breeze with

Hello there, I've been tasked with editing a website for a client, but the site is located on a local web server and was designed using aspx. As I review all the files, I am encountering difficulty finding the HTML code associated with runat=server w ...

c#htmlasp.netcode-behind

The challenge of applying flex property in React Native JSX

I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...

cssreact-nativemobile

What makes this CSS causing render blocking?

I've been meticulously following the Google PageSpeed guidelines in order to optimize the performance of my website. Upon running an analysis, Google provides me with a score based on their set guidelines. There's one particular guideline that ...

javascripthtmlcsspagespeedfront-end-optimization

Transform JSON array containing identical key-value pairs

My array is structured as follows: [ { "time": "2017-09-14 02:44 AM", "artist": "Sam", "message": "message 1", "days": 0 }, { "time": "2017-09-14 02:44 AM", " ...

javascriptjqueryhtmlangularjsfrontend

Preventing Text Truncation in THREE.js Texture Created from 2D Canvas

Many people tend to use the 2D canvas texture method for creating text billboards, sprites, and overlays in THREE.js scenes instead of relying on imported image files. You can check out an example by Lee Stemkoski here. However, I have noticed that when a ...

javascripthtmlcanvasthree.js

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

htmlcssresponsive-designbootstrap-5

What is the process for recording a video?

After researching extensively, I am eager to use a plugin that combines jQuery and flash to record a video using the system's Webcam. I came across scriptcam, but unfortunately, I encountered an issue where the plugin hangs on document load and the li ...

javascriptjqueryhtmlcssjquery-webcam-plugin

Bootstrap table exceeds the boundaries of the smartphone screen

I'm currently working on my first laravel project with bootstrap (https://getbootstrap.com/) and I've encountered an issue related to mobile device responsiveness. The problem arises when using a basic table in bootstrap4 (the absence of the res ...

htmlcsstwitter-bootstrap

Guide for positioning buttons in front of an image using HTML and CSS

I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...

htmlcssbootstrap-4

Exploring the Power of JQuery Load and CSS styling

Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...

jquerycssajax

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

Creating a custom jQuery plugin for exporting data

I am crossing my fingers that this question doesn't get marked as 'already answered' because I have thoroughly searched previous questions and unfortunately, my specific case is not listed anywhere. I have successfully created a jQuery func ...

javascriptjqueryhtmlfunction

Troubleshooting: Custom HTML Attribute in Angular 8 Component HTML Not Functioning as Expected

I have a unique situation in my Angular 8 application where I utilize custom HTML attributes and then use jQuery to fetch those attributes for various styling purposes such as setting background images and adjusting the height of div elements. Below is th ...

javascriptjqueryhtmlangularangular8

Acquiring the PayPal callback variable with PHP

When using PayPal Standard HTML form, upon completion of the transaction, the user is directed to the return URL. To retrieve variables such as the user email, order number, and other available information using PHP, I need to utilize the GET method from t ...

phphtmlpaypalpayment

What is the best way to adjust the height of a div based on its child content

I've been experimenting with various methods to extend the white background around the title to cover the rest of the content. I've tried using overflow, clear, min-height, max-height, and even the '*' selector but nothing seems to work ...

htmlcss

Tips for assigning dynamic values to ng-model in AngularJS

When a user clicks, I am dynamically appending a div to the DOM. In order to capture the values entered by the user, I need to use ng-model for input fields. Since I cannot predict how many divs the user will append, I want to make the ng-model values dyna ...

angularjshtmlangular-ngmodel

Vertical and right alignment of image within a div.container

I am trying to center the image with the unique ID of "image" to the right and vertically on the page. When using PHP, I generate my DIVs in the following way: echo "<div class=\"first\"> <div id=\"second\"><la ...

htmlcss

mouse down event causing unexpected behavior in selection handle

I'm attempting to create a gap in the rectangle by using the middle selection handle. I have two middle selection handles, and if I choose either of them, it should create a gap in the middle, dividing the rectangle into two equal halves (like curtain ...

javascripthtmlcanvas