Image hover effect displayed when hovering over an image

Is it possible to create a hover effect using purely CSS when hovering over an image, like in this example: https://i.sstatic.net/jjAWm.jpg I've come across several similar examples online, but they all seem to rely on jquery or javascript. I'm curious if this can be achieved without any scripting language...

UPDATE: I found some code that may work, but it seems quite lengthy.

.view-content {
height: 330px;
}
h2.view-title {
    font-size: 3rem;
    font-weight: bold;
    color: #7d7a7a;
    text-align: center;
    text-shadow: 0 0px 0px;
}
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

... (additional CSS code)


<div class="view view-effect">
<img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt="">  <p></p>
<div class="view-mask">
<a href="#" class="view-info">Show project</a>
</div>
</div>

htmlcss

Answer №1

Check out the code snippet below or simply click on the link provided:

https://jsfiddle.net/ananddeepsingh/99bop25r/

Here is the HTML:

<div class="box"> <img src="http://placehold.it/400x300">
    <div class="overbox">
        <div class="title overtext"> CSS Script </div>
        <div class="tagline overtext"> Animated Text Overlay On Hover </div>
    </div>
</div>

And here is the corresponding CSS:

.box {
        cursor: pointer;
        height: 300px;
        position: relative;
        overflow: hidden;
        width: 400px;
    }

    .box img {
        position: absolute;
        left: 0;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }

    // Additional CSS code truncated for brevity...

Answer №2

Achieving this effect using only CSS is definitely possible. You can utilize the :after pseudo-class in the following manner:

.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.image-container .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: inline-block;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease-in-out; 
    transform: translateY(100%);
}

.image-container:hover .overlay {
    top: 0;
    opacity: 1;
    transform: translateY(0);
}

.image-container:hover img {
    filter: grayscale(1);
}

.button {
    background: #FFFFFF;
    color: #111111;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 100px;
    transition: all 0.3s ease-in-out;
}

.button:hover {
    background: #111111;
    color: #FFFFFF;
}
<div class="image-container">
    <img src="https://unsplash.it/200" >
    <div class="overlay">
        <a class="button">Click Me</a>
    </div>
</div>

Answer №3

To add an effect on hover, simply append ':hover' after the specific element you wish to target. If, for instance, you desire the effect on the header, you can define a new CSS class like

header:hover{} and assign a opacity value, such as 0.5, to create a fading effect when hovered over. I hope this explanation proves useful!

Answer №4

Achieving this effect is only possible through the combination of HTML and CSS. Here is a sample code snippet to demonstrate:

HTML:

<div class="imagebox">
    <div class="transparent"><i class="fa fa-search" aria-hidden="true"></i>
    <p>Zoom</p></div>
    <img src="images/yourimage.jpg">
</div>

CSS:

.imagebox{
  position: relative;
}

.imagebox:hover .transparent{
  display: block;
}

.transparent{
  background: rgba(0,0,0,0.5);
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
  cursor: pointer;
 }

.transparent i{
  position: absolute;
  left: 50%;
  top: 30%;
  color: #fff;
  font-size: 20px;
}

.transparent p{
  position: absolute;
  left: 45%;
  top: 50%;
  color: #fff;
  font-size: 20px;
 }

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

Wordpress Bubble Notification - Conceal at Zero / Reveal at One or More

I am a beginner in PHP and CSS. After extensive reading and learning little by little, I successfully implemented notifications in my project using PHP and CSS. It functions properly, displaying the counts (friends, messages, and notifications) and redire ...

phpcsswordpressnotifications

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

htmlangulartypescript

Tips for preventing the impact of angular mat-panel position changes on matdialog

In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...

cssangularsassangular-material

Transmitting Data to PHP Using JQuery/AJAX

I'm struggling with this issue. Here is the HTML code that I have: <input type="text" class="studno"><input type="button" value="Check" class="chstudno"> How can I send this data to PHP using JQuery/AJAX? Below is the code that I current ...

jqueryhtmlajax

Restricting CSS Background Image Width to 960 Pixels

My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body. body { width:960px; margin: 10px auto 10px auto; background-image:url(logo.png),url(backgroundimage.jpg); ...

htmlcss

What is the method for specifying input type in an HTML document?

I need assistance with controlling an input field labeled "Size" in HTML. The input should only allow users to enter Numbers and specific characters like X, ', and ". Other alphabets and characters should be restricted. I am working with AngularJS as ...

htmlangularjshtml-input

How to stop Bootstrap collapsible items from "shifting"

I recently integrated a Bootstrap collapse plugin to manage my list of common inquiries: https://jsfiddle.net/2d8ytuq0/ <ul class="faq__questions"> <li> <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Endless cycle of changing border colors

I'm trying to achieve a specific effect where the border of a div changes colors in an infinite loop. However, I want this effect to be applied only to the border of the div and not the entire body background. Here is an example: http://jsfiddle.net/A ...

javascriptcsscss-animations

What is the best way to incorporate autoplay video within the viewport?

My objective is for the video to automatically start playing when it enters the viewport, even if the play button is not clicked. It should also pause automatically when it leaves the viewport, without the need to click the pause button. <script src=& ...

javascripthtmljquery

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

I have a program that calculates the total price of products based on a specified quantity and updates an HTML table with these values. To demonstrate this, I am constantly taking input using an infinite loop. <!DOCTYPE html> <html> ...

javascripthtml

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...

javascripthtmlnode.jsangulardom

Preserving the initial input values in a secure manner for future reference, utilizing either an object or a

Recently, I've started revisiting a script I created a while back that checks for changes in a form to prompt a message asking 'Would you like to save your changes?'... One thing that's been on my mind is whether I should store the ori ...

javascriptjqueryhtmlinput

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

htmlcsstwitter-bootstrap

"Utilizing node.js to create a custom regular expression for removing anchor tags

Can someone provide me with a regex pattern that can eliminate all the a tags from HTML and display the URL as plain text? For instance, take this text: abc <a href="http://a.com" target="_blank">bbb</a> ccccccc After applying the regex patt ...

htmlregexnode.jstags

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Struggling with this one, I've carefully gone through all previous posts before reaching out for help. The structure of the HTML web table is provided below. I am specifically interested in extracting the date from the span tag, and here are the vari ...

pythonhtmlselenium-webdriverxpath

Ways to display HTML elements depending on the width of the window

Is there a way to create visually appealing hexagon containers for text that work well across all window widths? Currently, the design is only satisfactory at certain window sizes. I am looking to implement a solution where specific code will be displayed ...

phphtmlcsssassbootstrap-4

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

cssangular

Determine the latest date within each group and display the corresponding output value

I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...

javascripthtmljsond3.js

Divide the division inside the box by clicking on it

I am looking to create a unique div with a random background color and a width of 100px. Additionally, I want to have a button that, when clicked, will split the original div into two equal parts, each with its own random background color. With each subs ...

javascripthtmlcss

Do you know where I can locate the HTML and CSS pertaining to the search results page

I'm looking for a way to present search results on my website that resembles the Google search results, creating a familiar interface for users. Is there anyone who knows where I can obtain the HTML and CSS code that produces the same style as Google& ...

htmlcssstyles