Having some trouble with properly mirroring a div

I'm currently working on a website where I have divs that expand when hovered over, revealing a link inside. Everything was going smoothly with a div that expanded to the left, but I encountered some issues when trying to create an exact mirror image that expands to the right.

.hoofdvak
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0px;
            text-align: center;
            position: relative;
        }

.linkerwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }

.rechterwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
        position: relative;
        overflow: hidden;
    }   

.inhoudlinks
    {
        border-radius: 50px 10px 10px 50px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.4;
        padding: 10px;
...

...  <!-- The rest of the CSS code remains unchanged -->

My main issue is why "inhoudlinklinks" responds correctly to "padding-left: 48%" but not to "padding-right: 48%" in the case of "inhoudlinkrechts". It's perplexing.

I'm struggling to adjust the distance between "inhoudlinkrechts" and the right edge of its parent div "inhoudrechts."

Currently, the content extends out of the div on the left side and only becomes visible when hovered over. I want to achieve the same effect on the right side as well.

If anyone has any insights or solutions, I would greatly appreciate it!

htmlcsshoverpadding

Answer №1

In my opinion, applying right padding to inhoudrechts and floating the child div to the right would enhance the layout. Additionally, setting the width of the child div to 100% would improve the overall design.

Answer №2

After tweaking some distance settings to pixels, I managed to get it working.

html        
    {
        margin: 10;
        background-image: url("../images/background.png");
    }

body    
    {
        margin: 0;
        font-family: "Verdana", Geneva, sans-serif;
        color: #000000;
    }

img
    {
        width: 100%;
    }

h1
    {
        font-size: 30pt;
        font-style: bold;
        font-family: "Courier New", Courier, monospace;
        letter-spacing: 5px;
        text-shadow: 1px 2px 1px #79797B;}
    }

h2
    {
        font-size: 20pt;
        font-style: bold;
    }

h3
    {
        font-size: 16pt;
        font-style: bold;
    }

p
    {
        font-size: 12pt;
    }

/* Option with bar*/
#header
    {
        text-align: center;
        background-color: #BEBEBE;
        opacity: 1.0;
        overflow: hidden;
        border: 2px solid #FFFFFF;
        border-radius: 50px 50px 50px 50px;
        width: 750px;
        font-family: "Courier New", Courier, monospace;
        margin: 0 auto;
        text-shadow: 1px 2px 1px #FFFFFF;
    }

/* Option without bar    
#header
    {
        text-align: center;
        overflow: hidden;
        color: #BEBEBE;
    }
*/
#body
    {
        text-align: center;
        overflow: hidden;
        margin: 0 auto;
    }

#footer
    {
        text-align: center;
        background-color: #BEBEBE;
        opacity: 0.4;
        overflow: hidden;
        border-top: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        float: bottom;
    }

.wrap
    {
        height: 600px;
        width: 100%;
        padding: 0px;
        margin: 0 auto;
        margin-top: 50px;
        margin-bottom: 50px;
    }   

.hoofdvak
    {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 0px;
        text-align: center;
        position: relative;
    }

.linkerwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }

.rechterwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
        position: relative;
        overflow: hidden;
    }   

.inhoudlinks
    {
        border-radius: 50px 10px 10px 50px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.6;
        padding: 10px;
        width: 350px;
        height: 95%;
        transition: all 1s;
        float: right;
        overflow: hidden;
    }
    .inhoudlinks:hover
        {
            opacity: 1.0;
            width: 700px;
        }

.tekstlinks
    {
        height: 100%;
        width: 350px;
        float: left;
    }

.inhoudlinklinks
    {
        position: absolute;
        padding-left: 230px;
        padding-top: 75px;
    }

img.inhoudlinklinks
    {
        width:100%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinklinks:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

.inhoudrechts
    {
        border-radius: 10px 50px 50px 10px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.6;
        padding: 10px;
        width: 350px;
        height: 95%;
        transition: all 1s;
        float: left;
        overflow: hidden;
        position: relative
    }
    .inhoudrechts:hover, .inhoudrechts:active
        {
            opacity: 1.0;
            width: 700px;
        }

.tekstrechts
    {
        height: 100%;
        width: 350px;
        float: right;
    }

.inhoudlinkrechts
    {
        position: absolute;
        width: 400px;
        right: 225px;
        float: top;
        margin: 10px;
        display: inline-block;
    }
.inhoudlinkrechts2
    {
        position: absolute;
        width: 400px;
        right: 225px;
        top: 50%;
        float: top;
        margin: 10px;
        display: inline-block;
    }

img.inhoudlinkrechts
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinkrechts:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

I appreciate the assistance provided!

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

Guide on showcasing the values from two text fields with autocomplete suggestions in a third text field

Hey there, I have a search form that takes values from two text fields and combines them to populate a third text field for querying. <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = password.value +''+ passw ...

javascriptjqueryhtml

The entire section turns into clickable links

Help! I've encountered a strange issue with my website. Somehow, the banner in one section has become clickable - but I can't figure out why. Can you help identify the problem? <div id="slider" style="height:20%;"> <h2 style="backgr ...

htmlcss

``Can you help me with a tutorial for positioning text in front of an image using bootstrap?

How can I align text next to an image using Bootstrap? Here's an example of what I'm trying to achieve: this This is the code I currently have: <div id="picture"> <img src="img/preview.jpg"> </div&g ...

htmlcssbootstrap-5

Redesigning the reset Zoom feature of HighCharts using a button inspired by Material UI styling

Currently, I am developing a project that incorporates HighCharts and Material UI for the user interface design components. I am wondering if there is a method to substitute the default HighChart reset Zoom button with the Material UI button component? ...

cssreactjsuser-interfacehighchartsmaterial-ui

Varied selection menu feature

Looking to build a new component: The idea is to create something similar to a dropdown list. I aim to incorporate this component into every cell (td) of table rows. The challenge lies in displaying the second div (item list) under the first div, but abov ...

csshtml

Declaration of Character Encoding in CSS3

Do I need to include a character encoding declaration in CSS3? When I add the @charset "utf-8"; declaration, Visual Studio's CSS3 validation displays a warning. Can anyone offer some guidance on this issue? ...

css

Creating a striking Materialize Jumbotron: A step-by-step guide

Recently, I came across a sign up page that caught my eye. You can view it here. Upon inspecting the source code, I discovered that it was built using angular material design. This led me to wonder how I could achieve a similar look using Materialize.css ...

cssangularjsmaterialize

Using Bootstrap columns within a PHP while loop

Encountering an issue https://i.sstatic.net/twePb.png and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/port ...

phpcsstwitter-bootstrapbootstrap-4

Issue with IE 11: Including card image inside anchor tags in Bootstrap 4 causes unwanted white space

I'm having an issue with my Bootstrap 4 card markup where the image is wrapped inside an anchor tag. The problem arises when viewing it in IE 11, as there is a large white space underneath the image, while everything displays fine in Chrome, Edge, and ...

htmlcssbootstrap-4

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

As a newcomer to website development, I recently looked into implementing open graph on my site. However, I ran into an issue where I could only set one thumbnail for the entire website. This posed a problem as I wanted each navigation menu tab (Home, Abou ...

htmlangularangularjsfacebook-opengraphshare-open-graph

Ways to assign the value of an alert to an element

Within this piece of code, my intention is to retrieve the alert value and apply it to an element. Description: The AJAX code I have written checks for values in a database, fetches new values from the database, and then displays these fetched values in a ...

javascriptjqueryhtmlajax

Troubleshooting the Missing Border Issue in Tailwind Form Fieldset [Code Snippet Included]

I am developing a basic react application with the help of Tailwind css. Scenario 1: Functioning correctly without tailwind: https://codesandbox.io/s/bold-agnesi-y70ue In this example, the tailwind library is not utilized. The simple react app displays ...

htmlcssreactjstailwind-cssfieldset

flexbox with equal width and height

I have two questions regarding flexboxes but I am unable to find the answers. How can I create 4 boxes with equal width and height, without using the viewport? For instance, if I create a box with 50% width, I want the height to be equal to the width. ...

htmlcss

Should we trust the reliability of bootstrap 4 despite it being in the alpha stage of development?

Currently, my website is built with bootstrap 3. I am planning to give it a fresh look by using bootstrap 4 for the upcoming revamp. But given that bootstrap 4 is still in alpha release, should I be concerned about potential issues? If so, what specific p ...

twitter-bootstrapcssfrontend

problem with z-index and background image overlap

I'm attempting to overlay a .header-content div, containing the website content, on top of another .header-bg div, which has only a background cover and a set height using z-index. When I change the .header-bg to position:absolute, the background ima ...

htmlcss

A guide on iterating and accessing Vue data in a loop

I am looking to iterate through my code in order to extract the value of each form input. This is to ultimately display a total score and severity score based on the user's inputs. The total score will count the number of symptoms present (0-3), while ...

javascripthtmlvue.js

Tips for updating the color of buttons after they have been selected, along with a question regarding input

I need help with a code that changes the color of selected buttons on each line. Each line should have only one selected button, and I also want to add an input button using AngularJS ng-click. I am using AngularJS for summarizing the buttons at the end ...

javascripthtmlcssbuttonangularjs-ng-click

The custom radio button is not showing up on iOs Safari

My code for custom radio buttons using CSS is as follows: input[type=radio]{ display:none; } .radio-options label::before { content: "\2b24"; color:#e2e2e2; display: inline-block !important; width: 17px; height: 17px; vert ...

htmlioscssangularjssafari

Creating a fluid side navigation bar in reactjs

Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...

javascriptjqueryhtmlcssreactjs

Design a gradient backdrop resembling a duo of bars for a visually appealing effect

Looking to create a unique background effect that resembles two progress bars as shown in this image: https://i.sstatic.net/LpENZ.png I know how to create one progress bar using linear gradients, but I'm wondering if there's a way to split the b ...

htmlcsslinear-gradients