Implementing text sliding effect upon hovering over an image using CSS

Is there a way to make text appear when hovering over an image, sliding in from the top and covering only 50% of the image height? Here's the code I have so far:

<img style="background-color:#3b283e; float:left;" src="images/f1.jpg" />
<div class="cags1">Traditional Pastry</div>

Here is the corresponding CSS:

.cags1{
    background-color: #3b283e;
    float:left;
}

.cags1:hover > img {
    opacity:0.5;
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}
htmlcsshover

Answer №1

Check out this fully functional example that correlates with your provided code:

.img-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.img-container img {
  background-color:#3b283e;
  float:left
}
.cags1 {
    background-color: #3b283e;
    position: absolute;
    top: -20px;
    transition: 0.5s;
}

.img-container:hover > img {
    opacity:0.5;
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}
.img-container:hover .cags1 {
  top: 20px;
}
<div class="img-container">
  <img src="https://dummyimage.com/150x75/992c99/313abd" />
  <div class="cags1">Classic Bake Goods</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

Adding columns dynamically to a table using ASP.NET Core 6

I am currently working on a project for my university, and I need to design a dynamic table with columns that can be added as needed. Each row should have a maximum of 4 columns before moving on to the next row and continuing the process until completion. ...

c#htmlasp.net-coreasp.net-core-mvc

Save information to a server-side .xml file with the use of either JavaScript or PHP

I have a website built using HTML and JavaScript. Currently, I am successfully retrieving data from a server-side .xml file on the site. Everything is working perfectly! However, I am facing issues with allowing users to input data into a field and save ...

phpjavascripthtmlxml

Twig: A guide to showcasing HTML content within block titles

Within my Symfony2 project, I am utilizing various twig templates. One of these templates contains a block labeled title. {% block title %}{{ announcement.title }}{% endblock %} The issue arises when the variable {{ announcement.title }} contains HTML ta ...

phphtmlsymfonytwig

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

javascriptjqueryhtmlcss

Having the title inside the <head> tag will display it on the page

I recently created a simple website, but I noticed that the title is appearing on the page instead of in the head section where I originally placed it. When I checked using the inspect tool in Chrome, I found that the title tag was actually inside the body ...

htmlheaddocument-bodypage-title

What is the best way to show a title when hovering over an AngularJS expression that is displayed on an HTML page?

I am working on a section of my HTML page that looks like this: <div ng-app="" ng-init="patient={firstName:'John',lastName:'Doe'}"> <p>{{ patient.firstName}} | {{ patient.lastName }}</p> </div> This section ...

htmlangularjs

What is the Best Way to Toggle the Visibility of Specific Buttons in a Table Using Jquery?

<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...

javascriptjqueryhtml

The HTML code may fade away, but the JavaScript is still up and running behind the

Switching between different div elements in my HTML document is a challenge. Here's the code I currently have: <div id="screen1" class="current"> <div id="press_any_key_to_continue"> <font style="font-family: verdana" color="yellow ...

javascriptjqueryhtmlthree.js

What is the best way to eliminate excess elements from overflow:hidden?

Whenever I click on a modal, it changes my body to overflow:hidden. As a result, the scrollbar disappears and my page becomes unscrollable. Once I close the modal, my body reverts back to overflow:auto allowing the page to scroll again. These functionaliti ...

javascripthtmlcss

Is it possible to embed a section of code from a different file?

Looking for a solution to streamline the process of updating multiple web pages with identical header and footer content. Currently have 5-10 pages with the same information, making it time-consuming to manually update each one when changes are needed. I ...

htmlcss

Preventing default form submission in jQuery: How to cancel it when a certain condition is met

I have a contact form where I validate the input values upon clicking on the submit button. If there is at least one empty input, I trigger an alert and prevent the form submission by using preventDefault. However, if all inputs are filled and submitted, t ...

javascriptjqueryhtmlforms

Using Clip Path will result in the content always being hidden if it

Here is an example I created: div { -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); background-color: red; width: 150px; height: 150px; position: relative; } ul{ position: absolute; ...

cssclip-path

Choose the element before and add a style effect with CSS

I'm trying to create a layout with 3 <div> elements in one horizontal line, each with a width of 33.33%. When hovering over one div, I want its width to expand to 50% while the other two shrink to 25%. <div id="A"></div> <div id= ...

javascriptjqueryhtmlcss

Email Coding Problem

This email serves as a confirmation from a MailJet subscription widget. The issue at hand is that the body of the email appears too wide in Outlook, but the header is responsive and displays correctly. I have made several attempts such as setting fixed wid ...

htmlemail

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

Having an issue loading a modal with Angular and populating it with a template. The main problem I'm facing is that the inputs are extending beyond the boundaries of the modal - attached below is a screenshot illustrating the problem: Below is the c ...

javascriptcssangularjstwitter-bootstrap

Find the Nearest Value with Jquery and Swap Out the Div

When users complete a form and click "continue," they move on to the next section. At the top of the page, a heading indicates that the previous form is finished. If users click on the heading, it expands the completed form so they can edit it. For instan ...

javascriptjqueryhtml

Perpetual spinning of image grid

Are there any jQuery libraries available for continuous image rotation within an array? I have a collection of 30 partner logos that I would like to rotate continuously using either a jQuery library or plain CSS code. These images and information will be l ...

jqueryhtmlcssbootstrap-4

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

htmlcssinternet-explorerinternet-explorer-8internet-explorer-9

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

javascriptphpjqueryhtmlajax

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

javascriptjqueryhtmlarraysfor-loop