The images at the bottom arent't counted in the overflow:hidden attribute in the all class. They overflow and the positioning is very difficult as the border of the all div does not follow the images down.
<div class="all">
<div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div>
<div class="nav">
...
</div>
<h1 class="under"><br/><br/>Image><br/></h1>
<table>
...
</table>
<img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/>
<img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/>
<img id="steam2" src="images/steam.png" alt="Steam"/>
</div>
CSS:
.all{
width:1200px;
margin:auto;
border:5px solid #404040;
overflow:hidden;
}
#reviewI1 {
width:500px;
position:absolute;
top:415px;
left:1010px;
border: 3px solid #fedd58;
}
#reviewI2 {
width:500px;
position:absolute;
top:710px;
left:1010px;
border: 3px solid #fedd58;
}
#steam2 {
width:100px;
left:1210px;
position:absolute;
top:1010px;
}
You need to add a height to the .all class e.g. height: 400px;
Yours images are in absolute position, that mean they are out of the DOM flow.
So the overflow property won't apply in that case. You need to remove absolute position to use it :
#reviewI1 {
width:500px;
top:415px;
border: 3px solid #fedd58;
}
See this fiddle
Remove the "position:absolute" from the images' styling.
So, I currently have an image that is 400x400 pixels. When scaled externally to 200x200 it looks pixilated. I've therefore added it to Wordpress as 400x400 but scaled it down as follows:
However, I'm now trying to add an onmouseover event, with the scaled down image.
It works fine for the normal image, like this:
https://y.png'" onmouseout="this.src='https://x.png'" />
But if I try and scale the image, as follows, it doesn't work:
https://y.png' width="200" height="200"" onmouseout="this.src='https://x.png'" />
Please note I've left the source of the image out and replaced with 'x' and 'y'.
Does anyone know how to resolve this please?
Thanks all.
You could use the :before pseudo selector to show a background image. This will let you shrink down the 400x400 image in CSS. Run this and hover over the element.
.item {
position: relative;
overflow: hidden;
display: inline-block;
}
.item:hover:before {
content: "";
background-image: url(http://placehold.it/400x400);
background-size: 200px;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<a href="#" class="item">
<img src="http://placehold.it/200x200/8B0AB3/ffffff" />
</a>
You should be able to accomplish this without JavaScript.
Here's a Codepen demo: http://codepen.io/hellojason/pen/GZjpQE
In CSS:
img {
width: 200px;
transition: width 1s;
}
img:hover, img:focus {
width: 400px;
}
<img src="http://placehold.it/400x400" />
Is this what you're after?
Two way for this task you can use
First way using Javascript.
Script :
function bigImg(x) {
x.style.height = "400px";
x.style.width = "400px";
}
function normalImg(x) {
x.style.height = "200px";
x.style.width = "200px";
}
Html :
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://placehold.it/400x400" alt="Smiley" width="32" height="32">
You can call your own function from onmouseover or onmouseout function.
Second way using CSS :
CSS :
#image{
width:200px;
height:200px;
}
#image:hover{
width:400px;
height:400px;
}
Html :
<img border="0" src="http://placehold.it/400x400" alt="Smiley" id="image">
This question already has answers here:
Creating a hole in a <div> element
(10 answers)
Closed 7 years ago.
So say I have the following HTML structure:
<canvas></canvas>
<div class="overLay">
<button>Click me!</button>
</div>
The canvas is absolutely positioned with a negative z index, so the overlay is positioned over it (I have that much working). The issue is that I want the overlay div to have a white background, but the button to have a transparent background and show through to the canvas/body background color.
background-color:rgba(0,0,0,0);
doesn't work because it just shows the white background behind it. Any ideas on how to accomplish this effect?
The question this may have been marked as a potential duplicate of fails to account for the fact that buttons can have properties such as border-radius and offers no suitable solutions.
There's no way to create a hole inside an HTML element. A Transparent background can only be applied to an element that does not descend from a parent that has a non-transparent background.
What you could do, thought it's a little bit more complicate, is to create divs around your button, at it's same level, as siblings. Give those divs a white background, and then your transparent button should work.
I've created a sample using a table layout, where the button remains in the middle row, in the center cell. See that the button reveals the canvas background color:
canvas {
width: 200px;
height: 200px;
background: purple;
position: absolute;
z-index: -1;
}
.overLay {
width: 200px;
height: 200px;
display: table;
}
.overLay button {
background-color: Transparent;
white-space: nowrap;
}
.overLay > div {
display: table-row;
}
.overLay > .middle {
height: 1px;
}
.overLay > div > div {
display: table-cell;
text-align: center;
}
.overLay > .middle > div:nth-child(2) {
width: 1px;
}
/* Now, set the background on the divs around the button */
.top, .left, .right, .bottom {
background: white;
}
<canvas></canvas>
<div class="overLay">
<div class="top">
<div></div>
<div></div>
<div></div>
</div>
<div class="middle">
<div class="left"></div>
<div>
<button>Click me!</button>
</div>
<div class="right"></div>
</div>
<div class="bottom">
<div></div>
<div></div>
<div></div>
</div>
</div>
Since in my original answer, you pointed the intention of using a border radius. So there's another approach to make this possible.
Based on this asnwer
Make the overlay with a gradient radius background, that creates the gradient color center in the position where you want the button to be, at the button's size. Make the outer color as white, and the inner color as Transparent;.
Then, set your button's position. (I did this by centering it in a table layout):
canvas {
width: 200px;
height: 200px;
background: purple;
position: absolute;
z-index: -1;
}
.overLay {
width: 200px;
height: 200px;
display: table;
background-color: white;
background: -webkit-radial-gradient(50% 50%, circle, transparent 25px, white 0px);
background: radial-gradient(50% 50%, circle, transparent 25px, white 0px);
}
.overLay > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
button {
background-color: transparent;
border-radius: 50%;
width: 50px;
height: 50px;
position: relative;
}
<canvas></canvas>
<div class="overLay">
<div>
<button>Click me!</button>
</div>
</div>
Mmm..., have you thought about using an SVG element with a mask. That should do the trick. Take a look at the snippet.
body {
padding: 0;
margin: 0;
}
.your-canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
button {
width: 150px;
height: 100px;
background-color: transparent;
color: white;
cursor: pointer;
}
<div class="your-canvas">
<img width="512" alt="Weingarten Kuppel 8" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Weingarten_Kuppel_8.jpg/512px-Weingarten_Kuppel_8.jpg"/>
</div>
<svg height="324" width="512">
<defs>
<mask id="mask">
<rect width="512" height="324" fill="white"/>
<rect x="181" y="112" width="150" height="100" fill="black"/>
</mask>
</defs>
<rect width="512" height="324" style="fill:rgba(255,0,0,.6);" mask="url(#mask)"/>
<foreignObject class="node" x="181" y="112" width="150" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<button>Click Me</button>
</body>
</foreignObject>
</svg>
As far as i know it is even possible to use masking in pure css, but haven't had the time to look it up. Here is some information on using masks with svg Clipping and masking.
Have fun.
You could...
Reduce a canvas element to button size (== a button-canvas!),
Use CSS to position the button-canvas as desired over the div,
Add a click event listener on the canvas,
Draw whatever design you need on the button-canvas.
This way you have complete flexibility using the amazing drawing tools available with the canvas element.
Here's example code and a (fanciful) Demo.
While this demo is just for fun, you can easily restyle this example & turn it into a reusable widget:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var width=80;
var height=40;
var borderwidth=4;
var x=0;
var y=0;
x+=borderwidth;
y+=borderwidth/2;
var w=width-borderwidth-borderwidth;
var h=height-borderwidth;
var depth=5;
//
var stopCount=8;
var angle=0;
var angleDelta=360;
//
var labelColor='black';
canvas.width=width;
canvas.height=height;
requestAnimationFrame(animate);
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseUp(e);});
function makeGradient(){
var g=ctx.createLinearGradient(0,0,cw,0);
for(var i=0;i<stopCount;i++){
var stop=i/stopCount;
var hslDegrees=(angle+angleDelta*stop)%360;
var hsl="hsl(" + hslDegrees + ",100%, 50%)"
g.addColorStop(stop,hsl);
}
return(g);
}
function animate(){
ctx.clearRect(0,0,cw,ch);
gradientBorder();
ctx.font='12px verdana';
ctx.fillStyle=labelColor;
ctx.fillText('Click Me',x+10,y+25);
angle++;
requestAnimationFrame(animate);
}
//
function gradientBorder(){
var lw=ctx.lineWidth
var ss=ctx.strokeStyle;
ctx.lineWidth=borderwidth;
ctx.strokeStyle=makeGradient();
//
ctx.beginPath();
ctx.moveTo(x+w-depth,y);
ctx.lineTo(x+depth,y);
ctx.bezierCurveTo( x-depth/2,y+h*1/6, x+depth*2,y+h*2/6, x,y+h/2);
ctx.bezierCurveTo( x+depth*2,y+h*4/6, x-depth/2,y+h*5/6, x+depth,y+h);
ctx.lineTo(x+w-depth,y+h);
ctx.bezierCurveTo( x+w+depth/2,y+h*5/6, x+w-depth*2,y+h*4/6, x+w,y+h/2);
ctx.bezierCurveTo( x+w-depth*2,y+h*2/6, x+w+depth/2,y+h*1/6, x+w-depth,y);
ctx.closePath();
ctx.stroke();
//
var b2=borderwidth/2;
ctx.beginPath();
ctx.moveTo(x+w-depth-1,y+b2);
ctx.lineTo(x+depth+2,y+b2);
ctx.bezierCurveTo( x-depth/2+b2+2,y+h*1/6+1, x+depth*2+b2,y+h*2/6, x+b2+1,y+h/2);
ctx.bezierCurveTo( x+depth*2+b2,y+h*4/6+1, x-depth/2+b2+1,y+h*5/6, x+depth+b2-2,y+h-b2);
ctx.strokeStyle='#666';
ctx.lineWidth=0.50;
ctx.moveTo(x+depth+b2-2,y+h-b2);
ctx.lineTo(x+w-depth-2,y+h-b2);
ctx.bezierCurveTo( x+w+depth/2-b2-2,y+h*5/6, x+w-depth*2-b2+1,y+h*4/6, x+w-b2-2,y+h/2);
ctx.bezierCurveTo( x+w-depth*2-b2+1,y+h*2/6, x+w+depth/2-b2-2,y+h*1/6, x+w-depth-b2+3,y+b2);
ctx.strokeStyle='#666';
ctx.lineWidth=0.50;
ctx.stroke();
//
ctx.strokeStyle=ss;
ctx.lineWidth=lw;
ctx.fillStyle='gainsboro';
ctx.fill();
}
function handleMouseDown(e){ labelColor='red'; }
function handleMouseUp(e){ labelColor='black'; }
body{ background-color:white; }
.demo{
width:200px;
height:100px;
border:1px solid red;
position:relative;
}
#canvas{
position:absolute;
left:10px;
top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='demo'>
<canvas id="canvas"></canvas>
</div>
My code is not working. I found this is because the divs whoch have to change are in an other div... How to bypass the div containing others?
In this example I want the background color change of "partagefb" div when hovering "partage" div
demo: http://jsfiddle.net/u7tYE/1994/
Thanks
html:
<div class="partage" id="partage_70"><img src="/themes/glace_et_ombre/images/partage.png" border="0" width="22" height="21"></div>
<div class="enveloppe_partage">
<div class="partagefb"></div>
</div>
css:
.partage{
position:relative;
float:left;
margin: 2px;
cursor:pointer;
z-index: 100;
width:20px;
height:20px;
}
.partagefb{
position:relative;
width: 25px;
height: 25px;
margin:100px;
background: #ccc;
}
.partage:hover ~ .partagefb{
background-color:#000000;
}
.enveloppe_partage{
position: absolute;
margin: -28px 0 0 115px;
}
The problem is with your selector
use
.partage:hover + .enveloppe_partage .partagefb{
background-color:#000000;
}
Here is the fiddle
Add Id to the div
Make HTML as
<div class="partage" id="partage_70">
<img src="/themes/glace_et_ombre/images/partage.png" border="0" width="22" height="21">
</div>
<div class="enveloppe_partage" id="ank">
<div class="partagefb"></div>
</div>
And CSS could be
#partage_70:hover + .enveloppe_partage #ank {
background-color:#000000;
}
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}