Generate a visually striking text overflow effect on an image

I'm looking to add a stylish hover effect to an image I created. The goal is to show text when the mouse hovers over the image, but I also want to include a background to enhance readability.

Below is the HTML code:

<div class="portfolio-frame">
  <div class="portfolio-overflow-hidden">                                                   
    <img width="420" height="236" src="http://benjaminbinauld.lfdb.fr/files/2013/03/mire-servitel16-9.jpg"  />
    <div class="portfolio-overlay">
       <span class="text-overlay">Click here boy !</span>
     </div> 
  </div> 
</div>

And the CSS code:

.portfolio-frame {
  height: 94px;
  width: 165px;
  margin-left: 10px;
  margin-top: 46px;
   z-index:1;

}
.portfolio-overflow-hidden {
  height: 94px;
  width: 165px;
}
.portfolio-overlay .text-overlay {
  display: none;
}
.portfolio-frame:hover .portfolio-overlay {
  display:block;
  position:inherit;
  z-index:999;
  background-color: #000;
}
.portfolio-frame:hover .text-overlay {
  display:block;

  z-index:999;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  margin-top: -45px;
}

You can view the live version here: http://jsfiddle.net/fzKe7/

cssoverflow

Answer №1

Make sure to include position:relative in the .portfolio-overlay class

To see an example, check out this fiddle here

You might also consider cleaning up your CSS like so:

.portfolio-frame {
  height: 120px;
  width: 200px;
  margin-left: 15px;
  margin-top: 60px;
}

.portfolio-overflow-hidden {
  height: 120px;
  width: 200px;
}

.portfolio-overlay .text-overlay {
  display: none;
  position: relative;
  background-color: #333;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  top: -50px;
}

.portfolio-frame:hover .text-overlay {
  display: block;
}

Answer №2

.portfolio-frame:hover .portfolio-overlay {  display:block;  position:relative;  z-index:999;  background-color: #000; }

Adjust the positioning to Relative. This adjustment should resolve the issue.

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

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

I am currently facing an issue with recharts while trying to implement a BarChart. The setting width={600} and height={300} is causing the Barchart to be fixed in size, rather than responsive. How can I make the BarChart responsive? I attempted using per ...

javascriptcssreactjsmaterial-uirecharts

Adjust the top spacing in relation to the paragraph tag using jQuery

I wish to create multiple div elements with nested p tags that are initially hidden. Upon hovering over each div, I want the corresponding p tag to move up by the negative value of its own height. For instance: The first p tag has a height of 60px and a m ...

jqueryhtmlcss

The <pre> element is not compatible with Bootstrap 4 modals

Attempting to integrate the <pre> tag within a bootstrap 4 modal has proven unsuccessful. The JSON content placed inside the <pre> tag is not displaying properly. Unsure of the missing element causing this issue: Sample HTML code used: < ...

htmlcssbootstrap-4

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

cssangularbootstrap-4angular-materialbootstrap-5

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

In Javascript, navigate to a specific section by scrolling down

Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...

javascripthtmlcssdom

"Is it possible to rearrange the parent div's position when hovering over a child image with jquery sortable

Can you assist me with a task? I have two text boxes with an equal sign image, and I want the user to be able to move the div only when hovering over the equal sign. This means that the user should be able to drag the div using the equal sign. Can you hel ...

javascriptjqueryhtmlcssjquery-ui

Removing an element with a specific class that was created with Javascript can be done by clicking outside the box

I needed to eliminate an element that was created using JavaScript of a specific class when clicked outside the box. I have created a color-picker using .createElement and added a class to it. Now, my goal is to remove that picker whenever a click occu ...

javascripthtmlcss

Implementing Vue.js - Applying a Class on Click Behavior

Is there a way in Vue.js to dynamically toggle a class on a click event for a div without relying on properties or data? Take a look at this div: <div class="quiz-item" @click="checkAnswer(1)"> Upon clicking this div, I want to add either the clas ...

javascriptcsseventsonclickvue.js

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Hello, I am just starting out with JS. Is there a way for me to customize the position and font of text in this JS Fetch function using CSS? Any help will be greatly appreciated. let file = 'art.txt'; const handleFetch = () => { fe ...

javascriptcss

Issues arise when attempting to center objects within the navbar-nav while in mobile view (collapsed)

After some tweaking with the CSS code provided below, I successfully centered the navbar-nav content within my navbar. Below is the CSS code used: /* @media (min-width:768px) { */ Note this comment .navbar > .container { text-align: center; } .na ...

cssdrop-down-menuformattingtwitter-bootstrap-3scrollbar

How to make a flex between navigation bar in Bootstrap 4?

I recently embarked on learning Bootstrap 4 and decided to rely more on the bootstrap classes rather than traditional CSS. I encountered an issue with having two navbars stacked on top of each other and wanting to spread out the navigation items to utili ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Using CSS properties as false values within React applications

Can you provide guidance on using conditional styles with conditional operators? What would be the ideal code example? Is it possible to use non-CSS values? margin: isOpen ? '10px' : undefined margin: isOpen ? '10px' : 'initial&a ...

javascriptcssreactjsstyled-componentscss-in-js

Updating Button Text with PHP on WooCommerce

Hi there, I'm trying to find a way to translate a button in my WooCommerce store without using LocoTranslate or any other tools. Is there a PHP function that can help me change the button text without needing an ID? If you want to take a look at the ...

phpcssbuttonwoocommerce

How to align items to the left and center within a div?

How can I position the items inside a div in such a way that one element is centered and the other is aligned to the left? I attempted using flexbox, but found it difficult without introducing a hidden third element or justifying content. Another approac ...

htmlcss

Tips for smoothly applying a class to an image for seamless transitions, avoiding any awkward clunkiness

Check out my work on jsfiddle I understand that the image may not be visible, but I'll do my best to describe it. The header smoothly animates as I scroll down, but the image abruptly changes size instead of smoothly resizing. I want it to gradually ...

javascriptjqueryhtmlcss

How can I arrange an ItemTemplate and Alternating ItemTemplate next to each other in a Gridview layout?

My webpage features a "Reports" page that will dynamically display buttons (formatted ASP:Hyperlinks) based on the number of active reports in a table. While everything works well, I am struggling with achieving the desired layout. I want my buttons to app ...

htmlcssasp.net

Regain the original properties after implementing a universal CSS reset

Working with older code that I must build upon always reminds me of the drawbacks of using global CSS resets. I have this outdated foo.css file that begins with * {margin:0; padding:0;} In the past, I would duplicate it to a new file called bar.css, ma ...

htmlcsscross-browserbackwards-compatibilitylegacy

Hide, show, toggle, or empty elements using jQuery

I am having trouble getting this jQuery code to function properly. Within a div, there is a paragraph that I want to hide when a specific button is clicked and show when another button is clicked. Check out the code here $("#details").on("c ...

jqueryhtmlcss

Using JavaScript to toggle the visibility of an HTML div element

I'm looking to enhance the functionality of this show/hide HTML div using JavaScript. HTML <a href="#" class="clickme">Menu 1</a> <div class="box"> <span><span class="labelText"><span></span>Number 1</ ...

javascriptjqueryhtmlcss