Can someone guide me on creating a design element where a semi-transparent color overlay with centered text saying "NOW PLAYING" appears over an active fluid thumbnail image? I'm unsure of how to achieve this effect. Any help would be appreciated.
Can someone guide me on creating a design element where a semi-transparent color overlay with centered text saying "NOW PLAYING" appears over an active fluid thumbnail image? I'm unsure of how to achieve this effect. Any help would be appreciated.
To center the text vertically, you can utilize a relatively positioned wrapper div and a CSS pseudo class. This method will get you 95% of the way there: http://jsfiddle.net/ChrisLTD/FWtA3/
Here is the HTML code:
<div class="thumbnail active"><img src="http://placekitten.com/300/300"></div>
And here is the accompanying CSS code:
.thumbnail { position: relative; display: inline-block; }
.thumbnail.active:after { content: "NOW PLAYING"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; text-align: center; color: #fff; font-weight: bold; }
.thumbnail img { display: block; }
After putting in some hard work to create a 'holy grail'-style layout for my website, I'm faced with two issues that need fixing. The main objective is to have a 'sticky' footer that expands along with the height of the browser wi ...
There are 3 buttons on my custom page called page.php: <input type="submit" value="Btn 1" id="btn1"> <input type="submit" value="Btn 2" id="btn2" onClick="action();> <input type="submit" value="Btn 3" id="btn3" onClick="action();> ...
When it comes to coding something that will look good on my Galaxy S4 phone screen, I often have to code it in a way that makes it appear huge on my laptop screen. I've been researching media queries and I think I may have found a solution, but I&apos ...
Is there a way to ensure that the background of nav-items is completely filled with color rather than just partially? I attempted to use Bootstrap pills, but it did not achieve the desired effect. I also experimented with my own CSS, but encountered simil ...
My header features an image, and I am attempting to overlay a text block on the image to create a clickable area. However, when I do this, a white space appears below the header and above the body. Does anyone have a solution for this issue? Image: https: ...
I'm having trouble aligning these divs properly. I want them to look like this: However, they either overlap each other (with .title taking up the full width of the container) or stack on top of each other. Any suggestions? .wrapper{ display: ta ...
How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...
Looking to enhance my simple app with a few pages by changing the background color based on page URL using React.js. What I aim to achieve: If the pathname is /movies, I want the background color to be red. This is my current progress: import React, { ...
What is the recommended practice for using .col-* as children in a .d-flex container? Should .d-flex be used with .row instead? I have noticed that the Bootstrap 4 Docs do not show any examples of using a .col-* in a .d-flex container. The layouts provide ...
Currently, my website pulls the 12 most recent posts from a specific category and displays them as links with the post thumbnail image as the link image. To see an example in action, visit What I am aiming to achieve is to enhance the functionality of my ...
I'm currently working on a project that involves importing data from an excel sheet into a website form. However, I'm facing difficulties in properly reading the data from the sheet and sending it using the send_keys. To begin with, I set up e ...
I am trying to pass a CSS class from the parent component into the child component. Here is an example: <Parent> <Child /> </Parent> In order to apply a class from the parent to the <Child />, I have done this: <Parent> ...
I'm currently working on a project where I need to separate the three table rows within a dynamically generated table. My goal is to have jQuery treat each row individually in order to extract specific values like price and SKU. You can see an example ...
When I run my Capybara tests, I am facing a challenge with validating CSS properties as each webdriver returns the selector value in a different format. In one of my project pages, there is an element with a CSS property background-color specified in hexa ...
Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...
I have encountered an issue while attempting to incorporate Bootstrap <link> and <script> tags into my HTML within an Angular project. I acquired all the content delivery network (CDN) links from this website, but unfortunately, I am receiving ...
I struggle with debugging IE because I simply can't stand it and prefer not to deal with it. Anyways, I'm working on a treeview plugin and everything seems to be in order... However, there's an issue where it appears completely messed up o ...
Currently, I am working on my portfolio and have a projects section. In this section, I have implemented an image CSS grid that is functional but the images appear to be too large https://i.sstatic.net/KNHqJ.png. I would like to make them smaller, however, ...
I have 3 buttons positioned absolutely: .micro { position:absolute; } #micro_1 { left:1165px; top:176px; } #micro_2 { left:800px; top:300px; } #micro_3 { left:300px; top:400px; } I am looking to create a fading effect on these 3 elements based on the ...
In this Vue component, the parent element displays 8 instances of these components in a 2x4 grid layout. The issue arises when the image within each component is larger than its container, causing it to not shrink to fit while maintaining the aspect ratio ...