Troubleshooting: CSS Hover Effect Issue

I'm attempting to create a hover effect here, where hovering inside the border triggers a "grow" effect similar to this site.

I have tried copying the code provided here and adding it to the .hover class, but nothing seems to happen.

HTML:

<?php include('server.php') ?>
<!DOCTYPE html>
<html >
<head>
    <title>Log In</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

    <div class="hover">

            <div class="header" style="background: rgba(76, 175, 80, 0.1);">
            <h2 style="color:   #FFFACD;">Register</h2>
            </div>

            <form method="post" action="register.php" style="background: rgba(76, 175, 80, 0.2);" >

            <?php include('errors.php'); ?>

            <div class="input-group" >
                <label style="color:    #FFFACD;">Username</label>
                <input type="text" name="username" value="<?php echo $username; ?>" style="background: rgba(0, 0, 250, 0.1);" >
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Email</label>
                <input type="email" name="email" value="<?php echo $email; ?>" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Password</label>
                <input type="password" name="password_1" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Confirm password</label>
                <input type="password" name="password_2" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <button type="submit" class="btn" name="reg_user" style="background: rgba(0, 0, 250, 0.1);">Register</button>
            </div>
            <p style="color:    #FFFACD;">
                Already a member? <a href="login.php" style="color: #6495ED;">Sign in</a>
            </p>
            </form>

    </div>
</body>
</html>

CSS:

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 120%;
    background: #F8F8FF;
}

.header {
    width: 30%;
    margin: 50px auto 0px;
    color: white;
    background: #5F9EA0;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
}

.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

form, .content {
    width: 30%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #B0C4DE;
    background: white;
    border-radius: 0px 0px 10px 10px;
}
.input-group {
    margin: 10px 0px 10px 0px;
}

.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.error {
    width: 92%; 
    margin: 0px auto; 
    padding: 10px; 
    border: 1px solid #a94442; 
    color: #a94442; 
    background: #f2dede; 
    border-radius: 5px; 
    text-align: left;
}
.success {
    color: #3c763d; 
    background: #dff0d8; 
    border: 1px solid #3c763d;
    margin-bottom: 20px;
}
htmlcsshover

Answer №1

To achieve the desired effect, make sure to add the following selector:

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Here are the updated styles and code snippet with the added selector:

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 120%;
    background: #F8F8FF;
}

.header {
    color: white;
    background: #5F9EA0;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
}

.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
    width: 30%;
    margin: 50px auto 0px;
}

.hover:hover, .hover:focus, .hover:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

form, .content {
    padding: 20px;
    border: 1px solid #B0C4DE;
    background: white;
    border-radius: 0px 0px 10px 10px;
}
.input-group {
    margin: 10px 0px 10px 0px;
}

.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.error {
    width: 92%; 
    margin: 0px auto; 
    padding: 10px; 
    border: 1px solid #a94442; 
    color: #a94442; 
    background: #f2dede; 
    border-radius: 5px; 
    text-align: left;
}
.success {
    color: #3c763d; 
    background: #dff0d8; 
    border: 1px solid #3c763d;
    margin-bottom: 20px;
}
<html >
<head>
    <title>Log In</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

    <div class="hover">

            <div class="header" style="background: rgba(76, 175, 80, 0.1);">
            <h2 style="color:   #FFFACD;">Register</h2>
            </div>

            <form method="post" action="register.php" style="background: rgba(76, 175, 80, 0.2);" >

            <?php include('errors.php'); ?>

            <div class="input-group" >
                <label style="color:    #FFFACD;">Username</label>
                <input type="text" name="username" value="<?php echo $username; ?>" style="background: rgba(0, 0, 250, 0.1);" >
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Email</label>
                <input type="email" name="email" value="<?php echo $email; ?>" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Password</label>
                <input type="password" name="password_1" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <label style="color:    #FFFACD;">Confirm password</label>
                <input type="password" name="password_2" style="background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class="input-group">
                <button type="submit" class="btn" name="reg_user" style="background: rgba(0, 0, 250, 0.1);">Register</button>
            </div>
            <p style="color:    #FFFACD;">
                Already a member? <a href="login.php" style="color: #6495ED;">Sign in</a>
            </p>
            </form>

    </div>
</body>
</html>

Answer №2

Your CSS rule is currently set up to always apply to the <div class ="hover"> element.

If you only want the rule to take effect when the user hovers over the element, you should utilize the :hover pseudo-class. Here's how your rule should be structured:

.hover:hover {
    ...
}

Consider selecting a class name that not only indicates the hover effect but also describes the element and its content for better clarity.

Answer №3

Your approach to handling hover effects is incorrect. You should invoke the hover method like this: classname:hover. These elements are known as pseudo-elements and are fundamental in front-end development. To learn more about pseudo-elements, visit here

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 120%;
  background: #F8F8FF;
}

.header {
  width: 30%;
  margin: 50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align: center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}
.hover:hover, .hover:focus, .hover:active {
  opacity:0.5;
}
.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

form,
.content {
  width: 30%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;
}

.input-group {
  margin: 10px 0px 10px 0px;
}

.input-group label {
  display: block;
  text-align: left;
  margin: 3px;
}

.input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
}

.btn {
  padding: 10px;
  font-size: 15px;
  color: white;
  background: #5F9EA0;
  border: none;
  border-radius: 5px;
}

.error {
  width: 92%;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid #a94442;
  color: #a94442;
  background: #f2dede;
  border-radius: 5px;
  text-align: left;
}

.success {
  color: #3c763d;
  background: #dff0d8;
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Log In</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body style="background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

  <div class="hover">

    <div class="header" style="background: rgba(76, 175, 80, 0.1);">
      <h2 style="color:   #FFFACD;">Register</h2>
    </div>

    <form method="post" action="register.php" style="background: rgba(76, 175, 80, 0.2);">

      <?php include('errors.php'); ?>

      <div class="input-group">
        <label style="color:    #FFFACD;">Username</label>
        <input type="text" name="username" value="<?php echo $username; ?>" style="background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class="input-group">
        <label style="color:    #FFFACD;">Email</label>
        <input type="email" name="email" value="<?php echo $email; ?>" style="background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class="input-group">
        <label style="color:    #FFFACD;">Password</label>
        <input type="password" name="password_1" style="background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class="input-group">
        <label style="color:    #FFFACD;">Confirm password</label>
        <input type="password" name="password_2" style="background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class="input-group">
        <button type="submit" class="btn" name="reg_user" style="background: rgba(0, 0, 250, 0.1);">Register</button>
      </div>
      <p style="color:    #FFFACD;">
        Already a member? <a href="login.php" style="color: #6495ED;">Sign in</a>
      </p>
    </form>

  </div>
</body>

</html>

Answer №4

If you're looking to implement certain css properties on an element, follow this method:

    .some_class_name:hover {
      /* css properties */
     }

Assigning a class named "hover" will not trigger the hover effect; it will simply apply all properties to the element.

For further information on hover effects, visit W3Schools.

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 a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...

c#cssasp.netasp.net-corerazor

PHP code for displaying images on the same level

Is there a way to position images side by side in PHP? For example: image image image image. Currently, with the following code: print "</h2><br><a href='form.php'><img src=***.jpg width=100 height=100 /><br> ...

htmlcssimage

Incorporate a Flask variable into a webpage seamlessly without refreshing the page

I am facing a challenge in importing the variable test_data from Flask to my webpage without having to reload it. I have tried clicking a button, but haven't been successful so far. Any suggestions? Flask: @blueprint.route('/data_analysis' ...

javascriptjqueryhtmlajaxflask

Navigational elements, drawers, and flexible designs in Material-UI

I'm working on implementing a rechart in a component, but I've encountered an issue related to a flex tag. This is causing some problems as I don't have enough knowledge about CSS to find a workaround. In my nav style, I have display: flex, ...

javascriptcssreactjsmaterial-uirecharts

Positioning a Bootstrap popover directly adjacent to the cursor's location (within the clicked element)

I've been struggling to get my bootstrap popover to show up inside the element I'm calling it on, next to my mouse cursor. Despite extensive research in the popper.js documentation and numerous attempts with various parameters, including the &apo ...

javascriptcssbootstrap-4bootstrap-popoverpopper.js

Issues with Firefox's -moz-placeholder functionality were observed not being functional as

I'm having trouble styling this placeholder in Firefox 13.0.1 Here is the input field with a placeholder: <input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" /> This is the CSS associated with it: . ...

csshtmlfirefox

Implementing CSS styles with jQuery

Looking for a way to dynamically add CSS attributes to different form elements like text fields, text areas, checkboxes, and dropdowns? There's also a separate block that lists possible CSS properties such as font, font-style, width, and padding. What ...

javascriptjqueryhtmlcss

Achieve a safari-inspired checkbox appearance across all web browsers with custom CSS styling

In my asp.net mvc project, I am dealing with numerous checkboxes. The client has provided me with a PSD file in which the checkboxes are either white or black. In the absence of any check mark indicator, I assume the black ones are checked. My goal is to r ...

asp.netasp.net-mvc-3css

Secure User Authentication using HTML and JavaScript Box

In the given code, I am attempting to implement a functionality where a message is displayed next to the select box if it does not have a value of male or female. This message should not be shown if one of these values is selected. However, this feature ...

javascripthtml

Why is my Selenium program consistently throwing a NoSuchElementException regardless of the type of element query I try?

Looking for a solution to an issue with my Selenium code. I am attempting to extract data from a stock data website but keep encountering a NoSuchElementException. When using a JS query in the Chrome developer console, everything works fine: document.getE ...

javahtmlseleniumgoogle-chromeweb-scraping

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

What are some ways to reuse an angular component multiple times?

I am utilizing an angular component to dynamically load charts into my widget: Below is an example of the component: angular.module("generalApp").component("chartPie", { template: "<div class=Pie></div>", bindings: { data: "=", }, control ...

javascripthtmlangularjschartshighcharts

Unusual thin border of white pixels on IE 9

Having some issues with border radius in IE-9. The left border is showing white pixels. Any thoughts on why? This problem is only in IE 9, other browsers look fine. Here is the code snippet: <ul class="tags clearfix"> ...

htmlcssinternet-explorer

Is it possible to use CSS to target the nth-child while also excluding certain elements with

How can I create a clear break after visible div elements using pure CSS? Since there isn't a :visible selector in CSS, I attempted to assign a hidden class to the div elements that should be hidden. .box.hidden { background: red; } .box:not(.hid ...

jquerycss

What could be causing my Bootstrap Carousel to malfunction?

Currently, I am developing a MEAN stack application with Angular 7. In this project, I have incorporated a Bootstrap Carousel, but unfortunately, it seems to be malfunctioning. #slider .item { height: 500px; } .carousel-caption { font-size: 18px; } ...

htmlcssbootstrap-4angular7

Creating a navigation bar - using the LI tag with spaces between words causes text to wrap to the next line

Currently, I am in the process of creating a dynamic navigation bar for my website. In order to ensure that the elements within the navigation bar adjust automatically based on content, I have implemented the code below: .mytaboptions { position: rela ...

css

Display a DIV element sliding in from the left immediately upon website loading

Help needed in creating a jQuery script to smoothly slide a DIV element from <left: -200px> to <left: 0px> right after the page has finished loading. Previous attempts have not been successful, such as: $(window).load(function () { $(" ...

jqueryhtmlslide

The button must be programmed to remove a specific item from the server

I am currently developing an application to monitor my expenses using javascript, nodejs, express, and handlebars as the templating engine. Within the app, I have a "list" div that displays all of my expenses. (There is an add button next to the list, not ...

javascripthtmlnode.jsexpressexpress-handlebars

JavaScript Slideshow Transition Techniques

I'm struggling to create a slideshow gallery using Javascript. However, I'm facing an issue where the code instantly jumps from ferrari.jpg to veyron.jpg, completely skipping over lamborghini.jpg. <!DOCTYPE html> <html> <head> ...

javascripthtmlslideshow

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images