Develop Reference

Hide background layer on hover, reapers when hovering over <p> element

I am using the mixitup library to create a sortable grid. I have an overlaying grid item (.image-over) on top of individual grid items (.mix). When hovering over the grid item the div in the background (with a background image) gets blurred (.mix) and the displayed text is hidden (h1). In the overlaying div a new text is displayed (p.descfirst). When I hover over the new text inside the text reappears (h1). Any suggestions on how to avoid this?
.mix,
.gap {
display: inline-block;
vertical-align: top;
}
.mix {
background: #fff;
margin-bottom: 1rem;
position: relative;
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
z-index: -1;
}
.image-over:hover .mix {
position: relative;
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .1s ease-in-out;
}
.image-over {
display: inline-block;
position: relative;
top: 0;
z-index: 600;
background: transparent;
}
.mix:before {
content: '';
display: inline-block;
padding-top: 100%;
}
.mix h1 {
font-weight: 1600;
font-size: 500em;
color: #fff;
position: absolute;
z-index: 2;
top: 0;
margin: 0 auto;
padding: 5px;
background: rgba(0, 0, 0, 0.3);
}
.mix:hover h1 {
display: none;
}
.image-over:hover>p.descfirst {
position: absolute;
top: 40px;
left: 40px;
color: #ffffff;
font-size: 16px;
font-weight: bold;
z-index: 1;
transition: .2s ease-in-out;
line-height: 25px;
margin: 0;
}
<div class="container">
<a href="./show.html">
<div class="image-over">
<p class="descfirst">Progressive</p>
<div class="mix pink large square" style="background: url('./img/night.jpg')">
<h1>3 | Test</h1>
</div>
</div>
</a>
</div>
Update
As the run snippet example is not really working here are some screenshots to demonstrate the problem.

i would use instead of css a little bit jquery with the mouseenter event.
https://api.jquery.com/mouseenter/
$( "#outer" ).mouseenter(function() {
$( "#inner" ).doStuffHere();
});

How to make hover effect stays even after unhover?

I have created a simple JSFiddle for the problem. Here is the link:
https://jsfiddle.net/tnkh/Loewjnr3/
CSS:
.container{
background: white;
display:flex;
justify-content: center;
align-items: center;
height:50px
}
.circle {
display: inline-block;
width: 20px;
height: 20px;
background: #0f3757;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-left:10px;
float:left;
transition: all 0.3s ease
}
.circle:hover {
background:orange;
}
Basically over here, I can hover on any circle to change their color. I would like to ask how could I make the orange color stays on on any particular circle that I hovered on after the mouse moved away to white container?
Any script or CSS animation I could use to solve the problem?

Just add an mouseover event to .circle element and write an active CSS class which has background-color property and when event occurs remove active class from any .circle and add it to current element
JS
$(".container span.circle").on('mouseover',function(){
$(".circle").removeClass('active');//remove from other elements
$(this).addClass('active');
});
CSS
.active {
background:orange;
transition: all 0.5s ease
}
Updated Fiddle

Using JQuery you can add a class to an element as such:
$(element).on('hover', function() {
// this if you're hovering over the element that would change, otherwise rename 'this' to whatever element class or id you want to change
$(this).addClass('NameOfClass');
});
You can then have that class in CSS
.NameOfClass {
background-color: orange;
}
And then just remove that class when you want.

Change .circle:hover to .hover
.hover {
background:orange;
transition: all 0.5s ease
}
A) IF you want orange color be forever :
Use this jquery
$(document).ready(function(){
$('.circle').hover(function(){
$(this).addClass('hover');
})
})
$(document).ready(function(){
$('.circle').hover(function(){
$(this).addClass('hover');
})
})
.container{
background: white;
display:flex;
justify-content: center;
align-items: center;
height:50px
}
.circle {
display: inline-block;
width: 20px;
height: 20px;
background: #0f3757;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-left:10px;
float:left;
transition: all 0.5s ease
}
.hover {
background:orange;
transition: all 0.5s ease
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class= "container">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
B) If you want orange color be until mouse move on other circle
Use this jquery
$(document).ready(function(){
$('.circle').hover(function(){
$('.circle').removeClass('hover');
$(this).addClass('hover');
})
})
$(document).ready(function(){
$('.circle').hover(function(){
$('.circle').removeClass('hover');
$(this).addClass('hover');
})
})
.container{
background: white;
display:flex;
justify-content: center;
align-items: center;
height:50px
}
.circle {
display: inline-block;
width: 20px;
height: 20px;
background: #0f3757;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-left:10px;
float:left;
transition: all 0.5s ease
}
.hover {
background:orange;
transition: all 0.5s ease
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class= "container">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>

You can use Jquery to set a class when the mouse is hovered. Then the class will remain set even after the mouse moves away.
$(".circle").hover(function() {
$(this).addClass("hovered");
});
I have created a jsfiddle to demonstrate.

$( ".circle" ).mouseover(function(){
$(this).css('background','orange')
}
)
https://jsfiddle.net/rtxq9fnu/

Prevent event handlers in an iframe from affecting the parent window/page (jump/scroll to top)

I would like to prevent a toggle event inside an iframe from causing the parent page to jump up to the top when clicked.
The child page does not do that by itself thanks to the following code below. However, when I interact with it while inside an iframe; the same child page causes the parent with the iframe to jumps up to the top when I click on the toggle button in the child page.
I used:
return false;
evt.preventDefault();
evt.stopPropagation();
And they work fine if I was looking at the child page by itself. However, the code has no effect in preventing the parent page from jumping to the top.
Child page code (Application Matrix PHP):
.documentBody
{
color: #808080;
padding: 0px 20px 0px 20px;
vertical-align: top;
}
.documentBody a
{
color: #0075a0;
text-decoration: none;
}
.documentBody a:hover
{
color: #0092c8;
}
.boxBodyArticulatedTrucks {
display: block;
height: 208px;
margin: auto;
background: url( "../assets/user-interface/articles/box/body/background/articulated-trucks.png" ) no-repeat center center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.boxBodyArticulatedTrucks:hover
{
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.questionForm
{
/*width: 587px;*/
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
.questionFormBody
{
/*background-color: #fbfbfb;
border: solid 1px #eeeeee;*/
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
display: none;
}
.btnAccordion
{
border: solid 1px #eeeeee;
padding-left: 20px;
padding-right: 14px;
padding-bottom: 20px;
padding-top: 20px;
background: url( "../assets/user-interface/articles/accordion/icons/down-arrow.png" ) no-repeat center right 20px #fbfbfb;
}
<div id="articulatedTruck">
<div class="documentBody">
<div class="btnAccordion">
Articulated Truck
</div>
</div>
<div class="questionForm">
<div id="questionFormBody0" class="questionFormBody">
<div style="padding-top: 26px; padding-bottom: 10px;">
1. What is the application(s)?
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#chkArticulatedTruck').change(function () {
$('#articulatedTruck').toggle(this.checked);
parent.setArticleSize();
return false; // Prevent page from jumping to the top
}).change(); // Ensure visible state matches initially
});
</script>
Parent page code:
<iframe id="article" src="./applications/application-matrix.php" width="627px" height="500px" frameborder="0" scrolling="no"></iframe>

How to make button have a pop-up effect and border to have a white shadow when mouse hover above the button

Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>

If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>

Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.

Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!

Href not working in Chrome, does work in IE

I have this website which I'm attempting to work on. I've obtained a template, which I'm editing the HTML to customize. There exists a section on the page that has three icons with a "More" button beneath them. I've set the button to link to another webpage, but it only works on IE -- not Chrome. Further, the icons themselves are supposed to change as you hover, which again they do in IE but not in chrome.
I have this code:
.intro3 {
text-align: center;
color: $(intro3.color);
}
.intro3 .row {
width: 90%;
margin: 0 auto;
padding: 120px 0 120px 50px;
}
.images_author {
font-size: 6em;
}
.images_author span {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
line-height: 160px;
color: $(intro3.circle.right);
border-width: 40px;
border-style: solid;
border-radius: 100%;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.right);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.left);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.authsx:hover .images_author span {
color: $(background.color.all);
border-style: double;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.left);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.right);
}
.intro3 .fourcol div.padd_25 {
padding: 25px;
}
.intro3 .fourcol div strong {
font: normal normal 22px PT Serif,serif;
line-height: 1.8em;
}
.intro3 .fourcol p a.more_aut {
font-size: 12px;
margin: 10px 0 10px 0;
display: inline-block;
padding: 10px 30px;
background: transparent;
color: $(intro3.color);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border: 2px solid $(intro3.color);
border-radius: 6px;
opacity: 0.6;
}
Which sets up for the (where the action is executed):
<div class='intro3'>
<div class='row'>
<h2 class='title_s authors'> Explore </h2>
<div class='fourcol authsx'>
<div class='images_author coll_1'>
<span class='icon fa fa-linkedin'/>
</div>
<div class='padd_25'>
<strong>LinkedIn Profile</strong>
<p>Connect via LinkedIn. See my skills, experience, and qualifications.</p>
<p><a class='more_aut' href='http://www.linkedin.com/in/amandabayless'><span>More</span></a></p>
</div>
</div>
<div class='fourcol authsx'>
<div class='images_author coll_2'>
<span class='icon fa fa-user'/>
</div>
<div class='padd_25'>
<strong>About Me</strong>
<p>Learn more about me. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
<div class='fourcol last authsx'>
<div class='images_author coll_3'>
<span class='icon fa fa-paperclip'/>
</div>
<div class='padd_25'>
<strong>Samples of Work</strong>
<p>See a small sample of my work. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
</div>
I only have very rudimentary skills here, and much internet sleuthing could not show me why there was a difference in the browser. For reference, This is the website. Could anyone offer advice? I don't know where to go from here.

Inside #page-content there is an element with class intro3 which has a pseudo element :after. The pseudo element overlays your links. Give it a lower z-index or remove it if you do not need it.