Looking for assistance with aligning the "tape" image on top of another image

I'm attempting to overlay one image on top of another, in order to create the effect of a scrapbook with the images appearing as if they are "taped" onto the homepage.

I want to maintain consistency with the tape layer while also allowing myself the flexibility to change the image underneath without affecting the positioning.

HTML:

<div id="container">
    <div id="content">
        <img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
        <img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />

        <div class="text">
            <h2>Rain Hands</h2>
            <p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
        </div>
    </div>
</div>

CSS:

.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }

.tape {
margin-left: 10px;
margin-top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}

The current result can be seen here:

However, my desired outcome is to have the tape overlaying the corners of the image.

Answer №1

Remove the tape from the div called container:

 <img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div id="container">
    <div id="content">
        <img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />


        <div class="text">
            <h2>Rain Hands</h2>
            <p>"When someone says, 'I just felt a raindrop!,' you can use Rain Hands to prove it. Raise both hands with palms up towards the sky. If you feel drops, it's raining. If not, it's not. Rain Hands never fail."<br /><br /><strong>Submitted By: </strong>Shaun</p>
        </div>
    </div>
</div>

Check out this jsFiddle link: http://jsfiddle.net/hescano/bb5JC/

Answer №2

Consider using #content {position: relative;}, and getting rid of the float property on the .tape.

Answer №3

To achieve this effect, I would create a wrapper div with the class "image" to contain both the photo and the tape graphic. Next, I would place the tape image inside another absolutely positioned div. By using the top: and left: properties, you can position the tape graphic precisely where you want it to align. In cases where the tape is too tall for the image, creating two tape images - one for the top and one for the bottom - would be a solution. Positioning them using top:, right:, bottom:, and left: accordingly.

<style>
.image{
position:relative;
}

.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }

.tape {
left: 10px;
top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
</style>


<div class="image">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="tape"><img src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /></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

Expanding columns to reach the full height of the page

Struggling to create three columns within the colmask and threecol div classes, excluding the header and footer. Any suggestions? Check out the website at I've attempted setting the body and html tags to 100% height. I've also experimented with ...

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...

Creating a dynamic visual experience with Angular 2: How to implement multiple font colors

I have a text area which is connected to one string, with the default text color set to white. <textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea> The connected string contains multiple variables. retur ...

The "sticky" positioning on the left side at 0 pixels stops working when a parent div

I'm currently working on a layout where the header disappears when scrolled, but the navigation and footer stay fixed. You can view it here: https://play.tailwindcss.com/LiIq5be2Wz?size=360x640 The same code is also available in jsfiddle: https://js ...

"Ensuring a mobile-friendly website menu's z-index is

I'm currently working on developing a responsive menu, but I've encountered some issues with setting the correct Z-index values. The problem arises when trying to add a "show menu" button that expands behind the main content (cwrap) after window ...

Issues with CSS hovering effects

this is my unique code snippet CSS Stylesheet .Navigation-signIn { background-color: #c8db5a; } .Navigation-signIn։hover { background-color: #ffffff; } JSX Component import { NavLink } from "react-router-dom"; import { BrowserRouter } fro ...

I'm puzzled as to why the banner text for my three images in the slider is only displaying on one of the images, all crammed together

Currently, I am working on an ecommerce project with Next.js. One of the challenges I faced was while setting up my banner page that includes a react-slick slider for images. Initially, when I added just one image, I noticed multiple renderings of it, but ...

All you need to know about the jQuery .css method

I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

I am currently working on developing an HTML/JS turn-based game, where I have implemented a canvas element using JavaScript. The canvas has a repeated background image to resemble a 10x10 squared board. However, I want to overlay a grid on top of it so tha ...

What is the best way to utilize overflow with TailwindCSS?

1. The Home Component: import React from "react"; import Title from "./Title"; import TaskInput from "./TaskInput"; import TaskList from "./TaskList"; function Home() { return ( <div className="h-scree ...

Tips for implementing validation in a multi-step form as outlined in w3schools tutorial

I came across a multistep form creation tutorial on w3schools. However, the tutorial only covers generic validation (checking if a field is empty), which is not sufficient for my needs. How can I implement HTML validation (e.g., min, max, length) for text ...

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

Ensuring responsive design: Forcing Bootstrap 3 / Knockout Navbar to collapse on mobile site view

While working on a website, I incorporated Knockout.js and added a click event to a href in the navbar. The issue is that the navbar doesn't automatically close when using it on a mobile device after the click event triggers. Is there a way to ensure ...

Tips for changing the CSS pseudo class of an HTML element with JavaScript?

Here's a code snippet I have: const myDiv = document.querySelector("#myDiv"); myDiv.addEventListener("click", fct_Div); function fct_Div(ev) { console.log(ev); if (ev.altKey === true) { myDiv.style["background ...

Resolving odd SVG anomalies

I recently exported three SVGs from Sketch to include in HTML, but one of them (specifically the Twitter icon) is presenting a mystery with its appearance. All three SVGs were created in the same manner, using #999999 as the stroke color and having a stro ...

Column spilling over with cards

Having a card with a form in it, I wanted to implement a y-scroll bar to control the visibility of the form on the page. However, it seems that the columns are extending beyond the boundaries of the card. .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2 ...

Is it possible to modify the text displayed within a select element?

Currently, I am working on enhancing a react app by making the dropdown options in a select element more informative than what is displayed as the selection. For instance: Selected: A However, when you click on the element for the dropdown it displays: ...

What could be causing my scrollable div to not function properly within a Bootstrap modal?

I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...

What methods are available for updating the href color of an element using the DOM?

I am looking to update the color of a tab (Mathematics-tab) based on the value of 'aria-selected' changing to true in Bootstrap. I have multiple tabs, including one for mathematics, and I want to visually differentiate between selected and unsele ...

Mobile browser not resizing window width in fluid layout on WordPress site

Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome. However, when I tried to acce ...