Recently, I've been working on an animation where the logo is unveiled as a div moves downward. The div itself has a transparent background.
I'm curious if it's feasible to hide parts of the logo behind the transparent div?
<div class="transparent">Some content</div>
<div class="logo"></div>
.transparent { position: relative }
.logo { position: absolute }
I have my doubts about the possibility of clipping or masking content behind an element that is transparent.
Therefore, it might be necessary to reconsider the concept of "hiding behind" and explore alternative solutions.
One potential solution could involve animating the height of the element:
* {
padding: 0;
margin: 0;
}
.transparent {
height: 2em;
line-height: 2em;
border-bottom: 1px solid grey;
position: relative;
}
.logo {
height: 0;
background: orange;
position: absolute;
top: 100%;
width: 100px;
transition: height 0.5s ease;
}
.transparent:hover .logo {
height: 25px; /* assuming height is known */
}<div class="transparent">Some content
<div class="logo"></div>
</div>Perhaps applying a similar effect could be beneficial where the background of the logo matches the background of the div that is described as transparent.
For example, consider implementing something like this: http://example.com/codepen
If the background consists of an image, it might require intricate calculations to blend seamlessly with the other elements.
If you want to experiment with hiding parts of a border, this technique might be worth trying out.
div {
border-top: 1px solid black;
border-right: 1px solid black;
width: 50px;
height: 50px;
position: relative;
overflow: hidden;
}
div::after {
content: "";
height: 50px;
width: 100%;
border: 1px solid green;
display: block;
position: absolute;
border-right: 0px;
border-top:0px;
border-bottom: 0px;
top: -10px;
}
div::before {
content: "";
height: 50px;
width: 100%;
border: 1px solid green;
display: block;
position: absolute;
border-right: 0px;
border-top:0px;
border-left: 0px;
top: -1px;
left: 10px;
}<div>
</div>It is now possible in 2021, thanks to a little bit of cleverness.
To achieve this effect, using overflow-y:hidden hides content from the bottom... unless it's turned upside down.
The wrapper needs to have a specific height that acts as a cutoff point.
.wrapper {
height: 70px;
position: relative;
overflow-y: hidden;
transform: rotate(180deg);
}
.logo {
animation-name: stretch;
animation-duration: 2s;
animation-timing-function: linear;
transform-origin: top;
}
@keyframes stretch {
0% {
transform: translateY(110px) rotate(180deg);
}
100% {
transform: translateY(40px) rotate(180deg);
}
}
Now, the logo will smoothly slide down from what appears to be a transparent background.
One option is to make the logo disappear by using the visibility hidden property.
visibility:hiddenI have a multi-line text that I need to adapt to a div. For example: https://i.stack.imgur.com/mtZmf.png Is there a way to adjust the text within the div? Can we prevent the blue spacing after the word "text" using CSS? If I have various texts of differ ...
Currently, I'm working on a page that contains multiple iframes. Only one iframe is active at a time, and I need to be able to determine which one is currently active. I attempted using document.activeElement.id, but it only returns the correct resul ...
Hey there, I've got some text inside a div that's been transformed with rotate(3deg). Strangely enough, in Firefox, the text appears wavy. When I remove the transform property from the div, the waviness disappears. Is there any way for me to keep ...
How do I modify the class within the same action as a toggle effect, which works independently very well? (I have multiple blocks with the same classes) $(".w_content").hide(); $(".w_target").click(function() { $(this).parent().next('.w_content&apos ...
I have a script that predominantly uses absolute addressing, but now I need to switch to relative addressing. The problem I'm encountering is when trying to change the links in PHP from: <link href="<?php print $theme; ?>style.css" type="tex ...
Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...
My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...
Looking to create a custom tooltip without relying on plugins. The goal is to align the tooltip vertically to the right of the triggering element, in this case, an input field. The current setup (see Fiddle demo) achieves the desired layout and content fo ...
My server hosts basic HTML content that includes an image with a relative file location. While this displays correctly in a browser, loading the content using Angular causes issues with resolving the relative path locally. I have tried following suggestio ...
I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...
I've searched high and low with no success. I'm attempting to detect when the carousel transitions to a new slide, whether it's automatically or by user click. Despite my numerous attempts, I have been unable to make this event trigger. I ha ...
When I hover over a navigation menu item, it brings up 6 sub menu items. I want these sub-items to appear in two blocks of 3 that are adjacent to each other. I tried using display: flex on the parent element .menu-item-1, but it doesn't seem to be wo ...
When I view the index.html file in a browser, everything works fine. However, when I try to run it on a local server using Express, it doesn't work as expected. Server.js const express = require('express'); const app = express(); app.get ...
Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...
Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...
I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...
I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...
I am a beginner in the world of coding, currently working on my inaugural project to create a web-based game using HTML, CSS, and JavaScript. I have encountered an issue with the .addEventListener() method that I couldn't seem to find a solution for ( ...
Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...
There seems to be an issue with the background image of a link on my exam project. The requirement is for it to work seamlessly on all browsers, including IE 6. However, the problem arises when the link spans multiple lines in IE 6, causing the background ...