So I have an iframe which covers the page, I want to basically make a div cover the whole page by transitioning in on the whole page from left to right when you hover over an <a> element. My code so far is this, which doesn't really seem to be doing what I want it to do fully on <a> elements which are not even inside the iframe
this is the code I've got so far, I tried doing it through css which sort of works when I try it online but the example on jsfiddle doesn't work that well if at all really.
<a id="example">a link</a>
<iframe src="https://www.w3schools.com/cssref/sel_hover.asp" style="border: 0; width: 100%; height: 100%" id="iframe">Your browser doesn't support iFrames.</iframe>
<div class="post-s">
wolooooloooo>
</div>
.post-s {
width: 0;
height: 100%;
background-color: rgba(253,0,0,0.7);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.7s ease;
}
a:hover ~ .post-s{
width: 100%;
}
An example:
https://jsfiddle.net/ejoaxmsw/7/
Your link is located under div.post-s, so it is gets lost a:hover when div expanding. You can set link above div
#example {
position: relative;
z-index: 1;
}
or disable pointer events for div
.post-s {
pointer-events: none;
}
Related
On a desktop the div with class="content" will be visible when hovering on the div with class="button". There is also a callback so it automatically fades out when hovering somewhere else.
But, this is not working on a mobile device because it is not possible to hover. I tried different solutions like adding other pseudo-classes (:active, :focus) and tried some JavaScript / jQuery. I also found this question How to simulate hover effect on touch devices?. I think JS is the best way to solve this problem but I am not used to work with that.
Here is my HTML code:
<div class="home">
<div class="button">
<div class="content"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.home {
display: flex;
justify-content: center;
align-items: center;
background-color: #3d2885;
width: 100vw;
height: 100vh;
}
.button {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 50vmin;
height: 50vmin;
background-color: white;
border-radius: 50%;
}
.content {
width: 0vmin;
height: 0vmin;
background-color: lightgreen;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.button:hover .content {
width: 25vmin;
height: 25vmin;
border-radius: 15%;
}
And I tried some jQuery:
$('.button').bind('touchstart', function() {
$(this).addClass('content');
});
$('.button').bind('touchend', function() {
$(this).removeClass('content');
});
Can anyone tell me how I can implement jQuery (or something else) so that a click event on a mobile device has the same effect as a hover effect on a desktop?
In this case I mean that the div with class="content" has a transition effect (growing) on clicking and a transition effect (shrinking) on clicking somewhere else.
Codepen example: https://codepen.io/elinehendrikse/pen/JJVRLm?editors=0110
I am trying to animate a div upwards when a user hovers on the div.
I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.
See jsfiddle here which demonstrates what my code is currently doing.
Please see code below:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>
You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother
You also need to scale back the text.
See here: jsfiddle
You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3
In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66)
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>
Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)
.box {
display: flex;
justify-content: flex-end;
flex-direction: column;
height: 100px;
border: 1px solid red;
}
.content {
background-color: #e3e4e6;
height: 50px;
width: 100%;
text-align: center;
-webkit-transition: height 1s;
/* Safari */
transition: height 1s;
}
.content:hover {
height: 100%;
}
<div class="box">
<div class="content">TEST</div>
</div>
If you just want to use css, just use:
.content:hover {
margin-top: -50px;
height: 110%;
}
See jsFiddle
since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top:25px;
}
.content:hover {
height: 110%;
margin-top:0;
}
Set top property with the value of height - 100 * -1
https://jsfiddle.net/x3cL1cpt/7/
.content:hover {
height: 110%;
top: -10%;
position: relative;
}
Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.
Replace this CSS with your current, needed to add transition:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
transition: 1s all ease;
}
.content:hover {
transform: scaleY(1.2);
transform-origin: bottom right;
}
How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.
You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!
If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.
In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}
I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:
http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar
You can scroll down or up in the content, but the navigation bar never goes away.
For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.
Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
}
#navigation li
{
display: inline-block;
width: 150px;
height: 110px;
cursor: pointer;
}
And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:
#container
{
position: absolute;
margin-top: 180px;
font-size: 25px;
width: 90%;
}
The reason it's going through is because you didn't set a background color to your navigation bar. Try that.
Edit: Looked at your source code. Replace navigation CSS in style.css file with this:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
background-color: #FFFFFF;
z-index:999;
}
The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.
You can use the property z-index:xxx, did you try that?
Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.
Have you tried to add data-role="header" ?
<div data-role="header" data-position="fixed">
CSS
#acc-close-all, #to-top {
position: relative;
left: 951px;
width: 29px;
height: 42px;
margin-bottom: 2px;
display:none;
}
#acc-close-all a, #to-top a {
position: absolute;
float: right;
display: block;
height: 42px;
width: 29px;
overflow: hidden;
display:none;
cursor: pointer;
}
HTML
<div id="acc-close-all">
<a title="Close all open tabs"><!----></a>
</div>
<div id="to-top">
<a title="Back to top"><!----></a>
</div>
jQuery
// Scroll close all and bcak to top buttons with the page
$(window).scroll(function() {
var top = $(this).scrollTop();
$('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
});
I would like these tabs to fadeIn slowly when the user scrolls down the page and fade up when the user is near the top.
I can get it to work without the display:none and display:inline but it just doesn't show up when the user scrolls down the page. I've read this http://api.jquery.com/scroll/ but still can't get it to work.
NB: The page is only scrollable when the accordion is opened. Yes more than one accordion can be opened at any one time.
The reason you're not seeing your links appear onscroll is because their parent containers (#acc-close-all and #to-top) are also set to display: none and never set visible on scroll. You can change the CSS as follows to fix the issue:
#acc-close-all, #to-top {
position: relative;
left: 951px;
width: 29px;
height: 42px;
margin-bottom: 2px;
}
Alternatively you could set both parent containers to display: block in your scroll event handler.
Here's a simplified example with it working.