We Keep Coding

Highlighting images on mouse enter

I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.
HTML:
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.
CSS:
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-highlight
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
JQuery:
function highlightNews(newsDiv)
{
newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{
var $content = $('.content');
var $news1 = $content.find('#news-1');
var $news2 = $content.find('#news-2');
var $news3 = $content.find('#news-3');
var $news4 = $content.find('#news-4');
function newsMouse(newsDiv)
{
newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
}
newsMouse($news1);
newsMouse($news2);
newsMouse($news3);
newsMouse($news4);
});
Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.
Thanks in advance :)

Why don't you make it with pure css without nothing of js?
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>

you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.
.news-image:hover{
border:solid 1px red;
}

If you want to use JQuery to do something like this, one option is to use hover and toggleClass
$('.news-image img').hover(function() {
$(this).toggleClass('news-highlight');
});
.news-image {
float: left;
width: 33.3%;
padding: 5px;
box-sizing: border-box;
}
.news-image img{
transition: all 0.3s ease-in;
width: 100%;
}
.news-highlight {
opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>

If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:
.news-highlight
{
background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
background: rgba(51, 153, 255, 0.5);
}
This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.
You could also change the images to a greyscale at the same time, which may improve the effect.
EDIT: I should have also stated that you need to change the order of your html to this:
<div class="col-5 parent-center">
<img src="images/news.jpg" class="news-image"/>
<div id="news1" class="news-highlight"></div>
</div>
now the .news-highlight div will appear on top of your img.

Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.

This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>

Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}

Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}

You could also set the image to display: block and add padding, if it does not mess with your layout.

Internet Explorer Buggy CSS Left

I have a html page where I want a div to scroll vertically with the page but not horizontally (rest of the content to disappear under it);
From a previous question I found a good answer to this, however I was wondering if there was a way to fix a small bug.
http://jsfiddle.net/nkgsqc1o/
When scrolling left using either the scroll bar's arrow or the arrow keys on the keyboard, the green box goes all spazzy trying to keep up. This doesn't occur in Firefox.
I am wondering if its the jquery code (below) or Internet Explorer itself?
$('#Container').scroll(function() {
$('#Const').css('left', $('#Container').scrollLeft());
});
I have tried playing with jquery's animate but it does much the same. I have also tried playing with the "smooth scrolling" setting inside Internet Explorer but that didn't help either.

Please check this fiddle. I have removed jquery and simply used CSS. Hope that helps.
div.Container{
height: 300px;
border: 2px solid #F00;
width: 800px;
padding: 3px;
overflow: auto;
/* POSITION */
position:fixed;
z-index : 1;
}
div.Const{
border: 2px solid #0F0;
width: 200px;
height: 250px;
float:left;
position:fixed;
overflow-y:hidden;
z-index : -1;
}
div.Main{
border: 2px solid #00F;
width: 3000px;
height: 200px;
margin-left: 220px;
top:0px;
float:left;
z-index : 1;
}
<div id="Container" class="Container">
<div id="Const" class="Const">
</div>
<div id="Main" class="Main">
</div>
</div>

Javascript Animation Positioning and Scaling issue

So I'm currently working on a single screen which has multiple content views which will be accessed from a button to the side of the dynamic area. I found this repo (https://github.com/ian-de-vries/Multi-Screen.js) which achieves something very similar to what I want, only it expects a full screen, as opposed to just a certain area. So far, I've got it very close to performing as I would hope, but the last couple of hours have had me stumped. Currently there are two issues:
1) The relative divs use the % width value of their containing div, while the animation of the divs uses a % width of the entire screen, making the animated divs larger. I think the way around this is to calculate the fixed width during the animation then remove it post animation. If you set a fixed width in the css (which isn't appropriate for the site) the animation is smooth and has the correct width whilst animating, but then leads to the next issue.
2) Because of the original functionality of the js, the animations come straight down the centre, which again adds to a worse animation because of the offset content.
While I've tried to solve both of these issues, JS is beyond me despite the experience I have in other programming languages. I thought I was onto something when editing the pre/post/animation_css variables, but I couldn't get what I wanted to achieve. Anyway, below is a quick dummy site which replicates the code on the actual site well, and creates the same issues. To get this working, put these two files in a folder with the multi-screen.js file from the repo.
<!DOCTYPE html>
<html>
<head>
<!-- Scrolling Pages -->
<!-- latest jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- link the css and js scripts -->
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="multi-screen.js"></script>
<!-- run the plugin -->
<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>
<div class="wrapper">
<div class="header">My Header</div>
<div class="contentarea">
<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>
<div style="width:80%; float: right; height: 600pt; background-color: grey;">
<div id="entry_screen" class="ms-container ms-default" style="">
go down<br>
go down 2
</div>
<div id="screen2" class="ms-container" style="">
go up<br>
go down
</div>
<div id="screen3" class="ms-container" style="">
go up<br>
go up 2
</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>
CSS:
.ms-container {
position: fixed;
z-index: 1;
display: none;
}
.ms-default {
position: absolute;
z-index: 2;
display: block;
}
#entry_screen {
height: 500pt;
width: 80%;
background-color: green;
left: 0;
margin-left: 20%;
}
#screen2 {
height: 500pt;
width: 80%;
//float: right;
background-color: blue;
//margin-right: 10%;
margin-left: 20%;
}
#screen3 {
height: 500pt;
width: 80%;
background-color: magenta;
margin-left: 20%;
}
.wrapper {
min-height: 100%;
padding: 0 10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}
.contentarea {
position: relative;
}
.header {
text-align: center;
width: 100%;
height: 50pt;
}
a {
color: white;
}

Ended up using another alternative. The one I chose was fullPage.js. It can be used for the desired functionally despite being for full screen sites. Hope this helps anyone who wanted to achieve something similar.

using element's own (not parent's) width for calculation or percentage in css, without javascript

I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare position:relative and set negative margin values roughly equal to 50% of the element's width, but the closest I've been able to come is to half the element's percentage of its parent's width:
<!DOCTYPE html>
<html>
<head>
<style>
.clap {
position:relative;
margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%
color:#f00
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
</center>
</body>
</html>
I'm trying to find a CSS-only solution that will use the width of the element itself, not the width of the container. I can't use JavaScript to do this because I plan to use it as a MathJaX fix by embedding it in a \style command. (As far as I know, MathJaX does not provide for embedded HTML or JavaScript code within its formulas, so you see why this must be CSS-only. I know it's possible with scripting. Is it possible with CSS, or is my endeavor hopeless?
Update: Thanks to a suggestion from #Daiwei, I think I'm on the road to the right solution. Thanks for all your answers. Here is the revised code:
.clap {
position:absolute;
display:inline-block;
transform: translate(-50%,0);
color:#f00 // for contrast
}
I'd love to show you the results, but I can't upload a picture. Sorry.
Another update: The solution I presented above works best in an HTML/CSS context, but it breaks in a MathJaX array, matrix, or similar tabular environment. Specifically, if the element is too long, it clips on the left side. Relative positioning moves the element halfway to the left but leaves a gaping space where it used to be! Any ideas for patching it up?

One pure CSS solution is to use transform.
element
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Notes:
You can use top: 50%; for vertical and left: 50%; for horizontal.
You would then use translateY(-50%) for vertical and translateX(-50%) for horizontal centering.
You can also use this trick to align elements to the bottom or right of it's parent, like in a table-cell by using 100% instead of 50% in the css.
If you want to support older browsers, then you'll need to use prefixes for transform. I highly recommend autoprefixer in your workflow.

As the size of the element is only known after it has been styled, how should the style be able to use it? Imagine this: Some element has a width of 200% of it's own width (=double size than "normal") set in CSS. One of it's children has its width set to 100% of the parent (=our element). The default width of an element is determined by its content. Content's of our element are as width as the element itself. Our element has no width yet however, as we're waiting for it to get some default, so we can double that one. Result: Nothing will ever get any width.
Therefore: What you're trying to do is not possible. But CSS3 has its calc, maybe you can get closer to what you want to acheive using it?

I don't know if this is what you wanted to do, but here is a demo: http://cdpn.io/bgkDf
HTML
<div class="container">
<div id="box-left"></div>
<div id="box-overlap">
<div id="box-overlap-inner"></div>
</div>
<div id="box-right"></div>
</div>
CSS
.container > div {
height: 50px;
float: left;
}
#box-left {
width: 40%;
background-color: red;
}
#box-right {
width: 60%;
background-color: green;
}
#box-overlap {
width: 0;
}
#box-overlap-inner {
position: relative;
z-index: 10;
height: 50px;
width: 50px;
transform: translate(-50%,0);
background-color: rgba(0,0,255,.5);
}

"Using element's own width for calculation or percentage" In general:
(Maybe not the best solution for your issue, but an answer to your question)
At the moment,the attr function doesn't work in Chrome. That would have been nice.
But you can use variables, if you either set the parent attribute yourself, or are able to use a predefined one. That way you can use the calc() function to calculate your child attribute.
Here is an example, using the browser defined viewport size, to calculate the width of an element:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--module-size: 33vw;
}
.clap {
display:inline-block;
width: calc(var(--module-size) / 2);
color:#f00;
border: 1px solid;
}
</style>
</head>
<body>
<center>
<span style="display:inline-block">1234567890
<span class="clap">1234567890</span>
1234567890</span>
</center>
</body>
This can be used in many interesting ways, to streamline your CSS. For instance with the #media style...

And if someone (like me) was trying to center the element by its parent, use this simple style:
.clap {
position:absolute;
left: 50%;
transform: translate(-50%,0);
}

What about converting the content to divs and enclose each within another div to use
margin: auto
?
Example (each super div within its own colour and shifted a little in height for clarity):
<html>
<head>
<style>
.dl
{
position: absolute;
left: 0px;
top: 0px;
max-width: 50%;
width: 50%;
text-align: left;
background: red;
opacity: 0.5;
}
.dls
{
margin: auto;
}
.dc
{
position: absolute;
left: 25%;
top: 10px;
max-width: 50%;
width: 50%;
text-align: center;
background: green;
opacity: 0.5;
color: white;
}
.dcs
{
margin: auto;
}
.dr
{
position: absolute;
right: 0px;
top: 20px;
max-width: 50%;
width: 50%;
text-align: right;
background: blue;
opacity: 0.5;
color: white;
}
.drs
{
margin: auto;
}
.overall-width
{
position: absolute;
left: 0%;
width:100%;
height: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="overall-width">
<div class="dl">
<div class="dls">
1234567890
</div>
</div>
<div class="dc">
<div class="dcs">
1234567890
</div>
</div>
<div class="dr">
<div class="drs">
1234567890
</div>
</div>
</div>
</body>
</html>