Hover Effect Dilemma with Div Element

Although it may seem like an easy question, I have been struggling with it for a week. On my website at this link, there is a portfolio section where the image changes to a description when the mouse hovers over it...

My goal is to invert this behavior so that the description div is displayed first in that section, and when the cursor moves over it, the image appears.

I have not been able to figure out which div controls this and how to modify it to achieve the desired effect.

<a href="img/plato.jpg" class="work-6-item image-link-2">
                       <img src="img/plato.jpg" class="img-responsive" alt="web tasarım uygulaması" />
                       <div class="work-6-overlay">
                          <div class="work-6-overlay-item">
                             <div class="work-6-des">
                                <span class="work-6-top-tit">PLATO FİLM</span>
                                <span class="work-6-line"></span>
                                <span class="work-6-sub-tit">Web Sitesi / İçerik Yönetimi</span>
                             </div>
                          </div>
                       </div>
                    </a>
jquerycss

Answer №1

To achieve the desired effect, I simply switched the hover and normal states in the code snippet below. Make sure to add this at the end of your style.css file:

.work-6-overlay {
    opacity: 1;
}
.work-6-overlay:hover {
    opacity: 0;
}
.work-6-des{
    opacity:1
}
.work-6-top-tit,.work-6-sub-tit, .work-6-line {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.work-6-overlay:hover .work-6-top-tit, .work-6-overlay:hover .work-6-sub-tit, .work-6-overlay:hover .work-6-line {
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -o-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
}

Answer №2

To rearrange the li elements inside each div, it seems like you just need to adjust the order of the code.

<div class="service-1-up effect-up">
  <ul>
    <li>
      <div class="h-center">
        <div class="v-center">
          <h3 class="title-after"><a class="txt-h">GRAFİK TASARIM</a></h3>
          <h4 class="des">Basılı ya da online tüm grafik tasarım ihtiyaçlarınızı, modern tasarım trendlerine uygun ve işiniz için en verimli doğrultuda planlıyor, tasarlıyor ve teslim ediyoruz.</h4>
          <p class="number">01</p>
        </div>
      </div>
    </li>
    <li>
      <div class="h-center">
        <div class="v-center">
          <img src="img/icon/tablet.png" alt="grafik tasarım">
          <h2 class="title">GRAFİK TASARIM</h2>
        </div>
      </div>
    </li>
  </ul>
</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

Determine the overall sum of rows present within this particular tbody section

I am struggling to calculate the total number of tr's within my nested tbody, but I am not getting the correct count. The jQuery code I used is returning a high number like 44 rows instead of the expected 7 rows. Can anyone point out where I might ha ...

javascriptjquerycounthtml-tablerows

Personalizing the form controls in Bootstrap for selection options

Utilizing Bootstrap's form-control class helps maintain a consistent style for both form input and select option elements. However, when using form-control on select elements, it results in an unsightly drop-down button appearance in Firefox.https://i ...

cssbootstrap-4html-inputform-control

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Utilize ReactJS to remove the img element when it is not present

Is there a way in my react component to replace a non-existing image with nothing using the onError method? render() { return ( <img src={myImage} onError={(e)=>{/*Code to handle replacing the image*/}}/> ) } Alternatively, I attempted t ...

jqueryreactjsimage

Issues arise when attempting to submit an HTML form to itself using AJAX along with a button

I am currently working on creating a PHP page that will execute the following tasks: Include an input form Use AJAX to submit the data to the same PHP page Perform some MySQL insert operations (not shown in the code) Display the MySQL results in another ...

phpjqueryajax

Creating a Kendo Menu within an Ext JS Panel

Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;) I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel In case you want to check it out, here's a F ...

javascriptjquerycsskendo-uiextjs4.2

Function for asynchronous AJAX request and handling keyboard events

Looking for assistance with populating a select list based on input from a form text field using Ajax. Currently, the function partially works but there is an issue where the variable firstname = $("#fn").val(); always returns one character less than what ...

jqueryajaxkeyboard-events

Track the cursor's movement

Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired res ...

javascripthtmlcss

MudGrid: Ensuring precise vertical cell alignment

I'm a newcomer to MudBlazor and struggling with a basic task. My goal is to create a structured layout resembling a table with a fixed number of cells, like this: Mountains 5 Lakes 3 The names on the left should be regular size while the numbers ...

cssmudblazor

Achieve automated zooming out using highcharts-ng through code

Currently, I am using Highcharts-ng as seen on https://github.com/pablojim/highcharts-ng Upon inspecting the source code, I have noticed some interesting functionalities in the directive utilizing scope.$on which I can leverage for broadcasting. One examp ...

javascriptjqueryangularjshighchartshighcharts-ng

What could possibly be causing the notification to fail to function in my deferred scenario?

I'm currently delving into the world of jquery deferred and making good progress, but I have encountered a hurdle when it comes to the notify feature. In my code snippet, you will notice that I attempted to use the notify method, only to find out that ...

javascriptjquerydeferred

Struggling with the transition of a CSS navigation menu from hover to focus

I'm attempting to transition a "mega menu" from 'hover' to 'focus'. My goal is to have the dropdown menus appear "on click" and remain visible until another top-level selection is clicked. Ideally, I am looking for a CSS-only solut ...

htmlcss

Implementing modifications to an object and ensuring those adjustments are accurately displayed upon return within AngularJS services

I'm facing an issue where I am attempting to update my Object within my AngularJS service and then return it. However, the value remains unchanged, and the original Object is returned as it was initially defined. Even using a Promise Object didn' ...

jqueryangularjsrestservice

Gradual disappearance of preloader as the page loads

I'm facing an issue with setting a gif as a website preloader. Despite trying different JavaScript solutions, the preloader remains visible even after the page has finished loading. $(window).on("load", function() { $(".loading").fadeOut("slow"); ...

javascripthtmlcsspreloader

The color of the link refuses to change

The link text is displaying in a persistent purple color, despite my attempts to change it to white. I have experimented with adding nav:link and nav:active, but the text reverts to the default color without any CSS styling applied. I have included the fo ...

htmlcss

Calculating the height of the browser menubar, toolbar, navigation bar, and bookmarks can be easily achieved using jQuery or JavaScript

How can I use jQuery to calculate the height of the browser and adjust the position of another div element accordingly? What steps do I need to take to achieve this functionality? ...

javascriptjquery

Confirmation message for deletion using jQuery on dynamic elements

My div is populated with dynamically added records. Whenever I click on the 'Remove' link, a confirmation box pops up multiple times corresponding to the number of records present in the div. I want the confirmation box to appear only for the spe ...

javascriptjqueryhtml

Utilizing Ajax to simultaneously bind multiple HTML controls through one request

My attempts to bind multiple HTML select controls using Ajax calls have been unsuccessful, despite my efforts. Can anyone see what I am doing wrong in my process? Here is the web service that is supposed to return five data tables: [WebMethod] public List ...

jqueryasp.netajaxweb-services

How come my picture is clinging to the bottom of the container?

I am facing an issue where my "vertical rule" is sticking to the bottom of the container when placed to the right of the image. <div> <div style="display:inline-block; width:210px;"> <img src="res/img/PlayBtn.png" style="top:- ...

htmlcss

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf