Zoom image over side divs - css

I'm creating this landing page: https://oakfield.online/
To give more focus on the image, I've tried to create a zoom effect on mouse hover. The objective is 50% achieved, the only thing that I couldn't do was to make the img tag to be on top of the columns beside that image.
This is the result:
There is my css hover code for the img:
.box-imagem img:hover {
z-index: 999999;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari and Chrome */
-o-transform:scale(1.1); /* Opera */
}
Any ideas about what should work?
Thanks!

.tcb-flex-col.tve_empty_dropzone:hover {
z-index: 9999999;
}
Play with that - your containers are fighting for powerrrrr. :)

You can do like this in two ways
1)
.tcb-flex-col>.tve_empty_dropzone:hover {
z-index: 9999999;
}
2)
.tcb-flex-col.tve_empty_dropzone:hover {
z-index: 9999999;
}

Related

CSS FadeIn and FadeOut trigerred by onclick with only css (100% pure) if not possible less resources as possible (no jquery, and no js to animation)

I was trying to make a 100% pure css animation, fadein and fadeout when i click on hamburguer menu to reveal the sidebar, (the backdrop should showing opacity like 500 miliseconds) (like jquery fadein) and when i click inside the sidebar to close the menu (the backdrop should hidde the opacity in 2 seconds) (like jquery fadeout)
You can see the version of jquery code here: https://cdpn.io/gilperon/fullpage/ZErBzvY
This is a very simple code, to open menu i put the event on hamburguer icon onclick=' $('#menu-backdrop').fadeIn(500);' and close to close, i put onclick=' $('#menu-backdrop').fadeout(2000);'
If it is not possible to make 100% css pure the animation, since it should be activated by onclick, maybe use just the javascript pure to onclick to add class, and the animation by done via css
I have a lot of ways using height:0 and key frames, but it was not possible to make the animation fadeout, fadein it works.
I make a code that workds to fadein, but to fadeout not working:
Another options are welcome, maybe using visibility, or other ways to show and hidden the animation, display:none usually not works with css animation
#menu-backdrop {
display: none;
animation:fadeOut 5s linear;
}
#menu-backdrop.exibir {
display: block;
animation:fadeIn 0.5s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
#keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0;
}
}
If anyone can post a work solution should be great, thank you very much guys.
Okay what you need is a transition, and you need to move away from your display property as it will break your animations and transitions since you cannot animate or transition that property in CSS.
A quick example:
const button = document.querySelector( 'button' );
const nav = document.querySelector( 'nav' );
button.addEventListener( 'click', event => {
event.preventDefault();
nav.classList.toggle( 'active' );
});
nav {
position: fixed;
right: 0;
top: 0;
width: 50%;
height: 100%;
background: red;
transition: opacity .4s;
/* This should be set to 0, but to make the point
* of pointer-events clear, I will set it to slightly
* higher so you can see there's no interaction
* with the nav. */
opacity: .1;
pointer-events: none;
}
nav:hover {
/* If you can interact with the navigation,
* you will see it change color. */
background: blue;
}
nav.active {
opacity: 1;
pointer-events: all;
}
nav + button:before {
content: 'Open ';
}
nav.active + button:before {
content: 'Close ';
}
<nav></nav>
<button>Nav</button>
The above shows you that by combining pointer-events: none with opacity you can effectively hide your menu. I added the :hover state for the <nav> to show that you cannot click the <nav> when it is open, and you should therefor consider this element invisible to the user.

Best way to animate a transform scale

I'm looking to do a simple effect of crushing some text. Only problem is, when I scale along the Y axis, it squeezes from top and bottom, leaving a strange floating squeezed element.
#-webkit-keyframes crush_head {
from {
-webkit-transform:scaleY(1); /* Safari and Chrome */
}
to {
-webkit-transform:scaleY(0.5); /* Safari and Chrome */
}
}
I want to squeeze this puppy DOWN like it's getting a weight dropped on it's head. NOT just from both sides. Any idea how to achieve the desired effect?
Attached is a fiddle of how I'm currently doing this.
http://jsfiddle.net/54A9M/
The property that you are looking for is transform-origin-y:
-webkit-transform-origin-y: 77%;
.crush {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
border-top: 1px solid black;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: crush_head;
-webkit-animation-duration:3s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin-y: 77%;
}
updated demo
The usual value would be "bottom", but then it will crush to the lowest point under the letters (in fact, to the real bottom of the text).
I set it to 77% on a trial an error basis.

How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

Preface
I'm trying to create a responsive website with a navigation menu that satisfies the following two requirements:
Navigation is fully visible in a normal browser window, laid out horizontally.
Navigation becomes a toggleable vertical menu for mobile devices and small screens, which animates between its "opened" and "closed" state.
I want performance to be good on mobile devices — especially on iOS — which means that the animation should use a GPU-accelerated translate3d transform CSS transition.
My Problem
Setting this up was a piece of cake, and for the most part it works great. I used z-index: 1 and transform: translate3d(0,-100%,0) to hide the menu behind a header with z-index: 2 in its default closed state, and then transform: translate3d(0,0,0) to animate the menu to its opened state.
But I'm just having one problem: When I resize my Chrome browser window and the mobile media query kicks in, the menu animates from an opened to closed state.
Resize your browser window to less than 600px wide to see the problem in action:
Fullscreen jsfiddle: http://fiddle.jshell.net/ymDYG/1/show/
Original jsfiddle: http://jsfiddle.net/ymDYG/1/
I think I know why this is happening: when the mobile media query kicks in, the browser sees that .nav is not currently active, so it animates it to the default closed state. I've tried experimenting with using display:none and display:block for the different media query states, but that seems to completely break the animation.
How can I prevent the nav menu's "closing" animation from firing as the browser window is resized?
Nice job, very clean. Can i steal it? :-)
Anyway, here's your solution with a demo.
I just moved the transition to another class:
.nav {
/* stuff */
z-index: 1;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.nav.activated {
transition: transform 400ms linear;
-webkit-transition: -webkit-transform 400ms linear;
}
Which you can add to the element at first "Toggle":
function toggle(){
$(".nav").addClass("activated").toggleClass("active");
}
P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again, you could use Modernizr's mq method:
$(window).on('resize',function(){
if(Modernizr.mq('(min-width:600px)')) $(".nav").removeClass("activated");
});
Referring to the side effect that Giona mentioned:
P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again (...)
there is a cleaner way to fix this without firing on each resize event. You can remove the class resposible for transition after the transition end (full demo here):
$(function()
{
$(".nav").on("transitionend", function() {
$(this).removeClass("activated");
});
}
)();
By combining answers from Giona and Janusz Kacalak (and Justin Bull's comment), we can further optimize the code so that the nav bar will never animate from an opened to closed state (not just for the first time, which is what Giona's code does).
function toggle() {
var navbar = $(".nav");
if (navbar.hasClass("active")) {
// Closing the nav bar.
navbar.removeClass("active");
// Listening for a transition.
// Use `.one` here because we only want this to be called once.
navbar.one(whichTransitionEvent(), function() {
// Remove animation property after the nav bar is closed.
navbar.removeClass("activated");
});
} else {
// Opening the nav bar.
navbar.addClass("activated").addClass("active");
}
}
// Ref: https://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
body { margin: 0; }
.toggle { display: none; }
.nav { list-style-type: none; margin: 0; padding: 0; }
.nav li { float: left; margin: 0; padding: 20px; background: #fdd; }
.nav li:nth-child(2n) { background: #dfd; }
#media only screen and (max-width: 599px)
{
.toggle {
display: block;
position: relative;
z-index: 2;
padding: 20px;
background: #eee;
}
.nav li {
display: block;
float: none;
}
.nav {
display: block;
position: relative;
z-index: 1;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.nav.activated {
transition: transform 400ms linear;
-webkit-transition: -webkit-transform 400ms linear;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Toggle menu
<ul class="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

exclude img opacity

I am trying this code:
<div id ="crop_image">
<img class="one" src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />
</div>
#crop_image:not(.one) {
width: 100%;
height: 100%;
background-color: red;
filter: alpha(opacity=20); /* internet explorer */
-khtml-opacity: 0.2; /* khtml, old safari */
-moz-opacity: 0.2; /* mozilla, netscape */
opacity: 0.2; /* fx, safari, opera */
}
However, the img still have opacity. What is wrong ?
demo
Mixing a few tricks (inline-block, absolute positioning, etc.) you can get a semi-transparent div to overlay an image.
demo
you can try this...(revised)
#crop_image img:not(.one)
I'm not sure what you're trying to do there, but I can explain why it is setting the opactiy to .2.
#crop_image:not(.one) means an element with the ID of crop_image which does not have the class of one. If you look at your crop_image it does not itself have the class of one so this will match. The crop_image contains an element which has the class of .one, but that is not what not does.

CSS: Styling visited images cross browser way / cross browser opacity

I want to use the CSS visited functionality in the browser to style a clicked image:
CSS:
.gridview a.plusminus:visited img
{
/* from http://my.opera.com/BleedingHeart/blog/2007/04/29/highlighting-visited-images-using-css */
background: transparent !important;
opacity: 0.2 !important;
}
HTML:
<a class="plusminus" href="#12345" onclick="/* code to exand a panel*/" onfocus="this.blur();">
<img title="Expandera" src="img/grid_plus.gif" width="14" height="14"/>
</a>
This works fine in Firefox 3.5.
But for i.e. Explorer the opacity/transparent trick don't work. Is there a way that I can do this cross-browser?
Also explorer seems not to remember "#12345" type of hrefs for visited links when reloading pages. Any way to fix that?
for opacity:
.gridview a.plusminus:visited img {
-moz-opacity: 0.2; filter:alpha(opacity=20); opacity: 0.2;
}
sorry don't know about remembering of anchor refs (but as I know they should work)
.gridview a.plusminus:visited img {
opacity: 0.2;
-ms-filter: "alpha(opacity=20)"; /* IE 8 */
filter: alpha(opacity=20); /* IE 4-7 */
}

Resources