Is it possible to create a cross design in pure CSS that overlaps an image inside a div? Or would I need to create a new image with the cross included?
Is it possible to create a cross design in pure CSS that overlaps an image inside a div? Or would I need to create a new image with the cross included?
CSS-
#cross {
width: 100px;
height: 100px;
position: relative;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
}
#cross:before, #cross:after {
content: "";
position: absolute;
z-index: -1;
background: #d00;
}
#cross:before {
left: 50%;
width: 30%;
margin-left: -15%;
height: 100%;
}
#cross:after {
top: 50%;
height: 30%;
margin-top: -15%;
width: 100%;
}
Steps to achieve this effect:
Step 1:
Create a simple square without any background color:
#cross {
width: 100px;
height: 100px;
position: relative;
}
Step 2:
`Make use of CSS pseudo-elements for added compatibility`.
Each element in CSS has space for content.
For example: See how to add before and after pseudo-elements
Step 3:
Position the before and after elements using position:absolute within the relative parent to create the desired shape.
Final step:
Transform and rotate the shape according to your preference. Here is an example:
By the way, Adam's method for achieving this effect is quite clever and was once my preferred choice as well.
Don't overcomplicate things when adding a simple multiplication sign to your design. Just use the × symbol for a hassle-free solution that works across all browsers.
Check out this example on jsFiddle
UPDATE
If you're struggling with relative/absolute positioning, remember to position your container relatively and your "X" element absolutely. Take a look at this helpful fiddle:
If I were in your shoes, I would recommend taking the simple route by placing an X inside a div and assigning your desired background image to that div.
Visit this link for more information.
.image {
background-image: url('http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg');
background-size: cover;
text-align: center;
font-family: sans-serif;
}
I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...
I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...
I am attempting to reposition the label above the input field when it is focused, but instead it becomes hidden. label > span::focus { top: -20px; font-size: 15px; color: blue; } Check out the complete Html & CSS code. Update: ...
I am struggling to apply CSS to an HTML generic control like <UL> and <LI> with the attribute runat="server" in ASP.NET. Specifically, I need to target the <li> element located within a master page from a content page. Once I locate thi ...
Currently, I am in the process of implementing a language switch feature for a website project that I am currently working on. This feature will allow users to seamlessly switch between English, Latvian, and Norwegian languages. To achieve this functionali ...
My issue is very similar to the problem described in this post: CSS Flyout menu gets cut off by borders of its container in IE9 The difference in my case is that I need to set the z-index (and position) on the container. You can view my JSFiddle here: h ...
I have successfully generated a dynamic list of cards from an array of objects stored in the user.component.ts file. user.component.ts import { Component, OnInit } from '@angular/core'; import { AuthService } from '../service/auth.service& ...
Is there a way to split the page vertically, with a background image on one side and text on the other? I've been struggling to achieve this layout - the background image won't stay on the left while the text remains on the right. Can someone off ...
Three news articles are displayed below, each with its own image. The issue is that the text in the articles consists of quotes of varying sizes, causing them to not align properly. Adding a fixed height in pixels solves the alignment problem on the Deskto ...
I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...
<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...
<div style="background: url(http://www.example.com/image.jpg) center center/cover;"> This specific background image defined inline is being replaced by a rule in an external stylesheet: div { background-image: none !important; } Here's my q ...
I am trying to manipulate an unordered list structure by changing the class of the anchor tags when a specific link is clicked. For example, when the link in List Item 1 is clicked, I want to change the class of all links underneath List Item 1 to "yes". ...
Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...
Utilizing JQuery mobile for my application. <input data-mini="true" data-inline="true" data-theme="d" value="Login" type="submit" /> When clicking the button in iOS, the color does not change immediately. It only changes when the button is held for ...
$("#bottomWatch").click(function(){ var doops = $(".videoMove").display; if (doops == "none") { $("#video").css("left","15%", "display: block"); } else { $(".videoMove").cs ...
I implemented a simple jQuery tab code that I found online to display dynamic content: This is the code snippet that I inserted into the HEAD section of my HTML page: <script src="js/jquery-1-9-1.js"></script> <script type="text/javascri ...
I am encountering an issue while trying to integrate a basic deck.gl (mapbox static map) into a react project. Although I can successfully add the map, it ends up taking over the entire page and hides any other content that should be visible above it. Spec ...
I have recently started a small project with Vue Js. I am trying to incorporate an upload file option in my contact form. Due to the numerous input text fields, I am using serialize for the form. However, I am facing issues with the append function. How ca ...
Is it possible to alter a specific style with a CSS class using jQuery or JavaScript? For example, if the HTML looks like this: <tab> <a class="anchor">a</a> </tab> And the CSS looks like this: a {border:1px} .anchor {color: ...