I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.
Scope
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img style = "position:absolute; top:300px; right: 0px; z-index:1"
src="computer.jpg"/>
<IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px;
WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/>
</body>
</html>
And here is the stylesheet.css
#grow:hover {
width: 100px;
height: 150px;
}
Inline styles have priority over CSS i believe.
Change your CSS and HTML to the following:
#grow {
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover {
width: 100px;
height: 150px;
}
HTML:
<IMG ID="grow" SRC="icon2.gif"/>
The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.
Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)
Try this style
#grow:hover {
width: 100px !important;
height: 150px !important;
}
Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.
The best thing you can do is avoid inline style and write style as below:
#grow
{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover
{
width: 100px;
height: 150px;
}
Related
I'm actually a brand-new coder, just starting on HTML (started yesterday) and I'm having a bit of trouble with something that I can't quite seem to find out how to do. I used CSS to make an image transparent on my main page, but unfortunately, it makes all the other images transparent as well, despite the fact that all the others are meant to be opaque. Here's the source code for my index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg.png");
background-color: #cccccc;
}
h1 {color:green}
p {color:blue}
h1 {
text-align: center;
}
p {
text-align: center;
}
header {
position:fixed;
top:0;
background-color:#333;
opacity: 0.4;
width:100%;
height:40px;
padding:20px;
text-align:center;
}
footer {
width: 100%;
bottom: 0;
background-color:#333;
opacity: 0.4;
position: fixed;
text-align:center;
}
#main{
padding-top:100px;
text-align:center;
}
img {
opacity: 0.4;
}
img:hover {
opacity: 1.4;
}
</style>
</head>
<title>Jordan's Test Site (iCarlos)</title>
<body center>
<header> Deal with it B)</header>
<div id="main">
<p><img src="giphy.gif" alt=Deal with it! style="width:500px;height:273px"></p>
<p>Hello! I am a website. Testing, testing, 1 2 3.</p>
<p><img src="deal-with-it.png" alt=Clic! style="width:450px;height:80px"></p>
<p>Click here to go to the table!</p>
</div>
<footer>
<p><img src="home.png" alt=source style=width:124;height:124></p>
</footer>
</body /center>
Thanks for the help, guys!
The simplest approach would be to define a class for transparent images (your current selector img adds the opacity rule to ALL the images) and then add these rules:
img.transparent {
opacity: 0.4;
}
img.transparent:hover {
opacity: 1; // no point in going higher than 1 here
}
Then in the HTML, just add the class to those images you want transparent:
<img src="image.jpg" class="transparent" alt="" />
You need to select your specific image.
Right now, img selects the tag img and not a specific image. You need to select an additional attribute to specify which image. You can do that by adding a class attribute, an id attribute or using your existing attributes like so (though I wouldn't generally recommend this):
img[alt=Clic!] {
opacity: 0.4;
}
img[alt=Clic!]:hover {
opacity: 1;
}
At the moment you're targetting every single imgtag in your HTML.
You have two easy ways to target only some images :
Add a class to the images you want to make transparent, in your HTML, and target that class in CSS
Example HTML :
<img class="transparent" src="..." alt="...">
And in the CSS :
img.transparent{
opacity: 0.5; /* Example, set it to whatever you want */
}
You can also keep your HTML structure and target your element more precisely with CSS
Let's say that you want to change the opacity of the img that are contained in the header, and not the opacity of the images that are not in the header, you could do this :
header img{
opacity: 0.5; /* Example, set it to whatever you want */
}
This is very basic in CSS and I recommand that you read a few tutorials, all of this should be covered.
Here is a good tutorial for beginners : http://css-tricks.com/how-css-selectors-work/
Here's an example of how you can target different images with a CSS class:
img {
opacity: 0.8;
width:200px;
height:200px;
transition: all 0.2s;
}
img:hover {
opacity: 1;
}
.transparent {
opacity: 0.2;
width:200px;
height:200px;
transition: all 0.2s;
}
.transparent:hover {
opacity: 0;
}
<img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000">
Hope this helps!
First option: Give the image an ID (or class, or select by its alt-attribute as Josh Burgess makes clear) and add a style rule to reflect its opacity
HTML
<img src="giphy.gif" id="transparent-image" alt="Deal with it!" style="width:500px;height:273px">
CSS
#transparent-image {opacity: 0.4;}
You can also use classes. Classes can be used on multiple elements in a document. IDs should never be used multiple times! A passport is for one individual in the whole wide world. Similarly, an ID is for only one element in your HTML. In your cases it might be useful to use a class so that you can have multiple transparent items with only one class:
.transparent-image {opacity: 0.4;}
Now, when you add the following HTML to an element, it will have this opacity value:
class="transparent-image"
For example:
<img src="giphy.gif" class="transparent-image" alt="Deal with it!" style="width:500px;height:273px">
Second option: Use inline styling
<img src="giphy.gif" alt="Deal with it!" style="width:500px;height:273px;opacity:0.4">
The first option is the best. Inline styles should not be used unless it concerns small chunks that are smaller than an added class would be. In your case, get rid of the inline styles all together and use stylesheets.
i need to know what the proper term for this code is. someone sent this to me and it was what ii was looking for, but i need the proper term so i can learn it myself. what i'm looking for is the multiple colors on a webpage.
<!doctype html>
<html>
<head>
<title>I am Awesome!</title>
<style type="text/css">
body, #nav, #header, .white-box, .blue-box {
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
h1{
margin: 0;
padding: 150px 0;
}
#nav
{
height: 60px;
color: #fff;
position: fixed;
background: darkblue;
}
#header {
background: red;
text-align: center;
}
#header, .white-box, .blue-box {
height: 400px;
}
.white-box {
background: #ccc;
}
.blue-box {
background: lightblue;
}
</style>
</head>
<body>
<div id='nav'>Navigation</div>
<div id='header'>
<h1>Some Cool Image!</h1>
</div>
<div class='white-box'>Content!</div>
<div class='blue-box'>More Content!</div>
<div class='white-box'>And Something Else!</div>
<div class='blue-box'>Redundancy!</div>
</body>
</html>
There is no proper term for having multi-colors on a web page. You have a simple css code defining various classes with various colors for different parts of your site. So be easy, Not every thing needs to have a name. If its still confusing, let me know in commnents
The proper term for this is Cascading Style Sheets, also known as CSS. CSS is used to style an HTML document and make it look fancier and do formatting changes that HTML cannot do (i.e change the color of the text or change the font size)
CSS can be edited in programs such as JSfiddle.
To insert CSS into an HTML document, the tag can be used or you can reference the CSS stylesheet using href.
CSS can be applied to 3 different things:
By element type (i.e. p{}
By ID: #main{} OR
By class: .button{}
The CSS code is put inbetween the curly braces.
For example, to change the color of element p to blue I would use
p {
color:blue;
}
It's Cascading Style Sheets, otherwise known as CSS. There are a few different ways to apply the styles:
By element type: body { ... }
By ID: #nav { ... }
By class: .white-box { ... }
You can read more about it online; one example is here: http://w3schools.com/css/css_syntax.asp
<div id="leftContent">
<div style="text-align: center">
<img src="S.jpg">
</div>
</div>
Now i have a stylesheet 'main.css' linked with this page...
since i haven't set the width/height of img in the code itself
I wanna set that via styling in main.css.
How can I do that..?
P.S.: I don't have access to HTML file of the page.. I only have the access to the style sheet.
use width and height in css
#leftContent img {
width: ... ;
height: ... ;
}
you may also create a specific css rule for each different image (no matter about parent container) if you are using them several times across the site with different templates, e.g.
img[src="S.jpg"] {
width: ... ;
height: ... ;
}
Add this in your external stylesheet.
#leftContent div img{your attributes}
try this:
if you want to select a specific img
#leftContent div img:nth-child(2 or 3 or 4 or) { //here number of the img.. 2 for the 2.
width: yourValue;
height: yourValue;
}
and else
#leftContent div img {
width: yourValue;
height: yourValue;
}
try this
http://jsfiddle.net/UbN7M/2/
CSS
#leftContent > div > img{
border:1px solid blue;
width:200px;
height:200px;
}
I am using the Wordpress plugins 'NextGEN Gallery' and 'JJ NextGen JQuery Carousel' because I'm trying to make a carousel that looks alot like the default looks of the last named plugin. The problem is that the plugin uses a div with a background image as a button and it gets this CSS:
div#about-jcarousel_container .jcarousel-skin-custom .jcarousel-prev-horizontal {
top: 188px !important;
}
Because of that, this doesn't work (the top: 0px part):
.jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
Where it gets nasty is that the 188px is never called anywhere, so I cannot just edit it to make it 0px but client side in the browser. So I've looked around and it seems that the plugin puts the 188px code in inline < style > tags. Because it has !important I can't just use !imporant in my template.css to overwrite it.
Is the another way to overrule the !important tags that are used inline? I realy would like the keep the plugin updateable.
The only way to override !important is to use !important again further in the cascade, so put it in a CSS file after the jcarousel one.
Alternatively, edit jcarousel
It seems that you are referring the jcarousel css file after your .css file in your html file. Keep the reference of the jcarousel .css file before your stylesheet(.css file). Then you can use !important again to override the default jcarousel .css file style property.
You can change the specificity of your code. If possible look for an ID as maybe the parent. And add !important to your top element.
#ID .jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px!important;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
That's why the use of !important is discouraged. You can only override the !important with another !important and it's not always possible. When there are two rules with !important then the "most important" one is applied.
And the question now is, which one is more important?
inline styles are more important (e.g. <div class="someclass" style="inline style"></div>) than normal styles
more specific rules > less specific (#one .example tag .yeah > .yeah)
if two rules have the same priority, the last one applied wins
If you can't add a more important rule, then you can't override the !important. But you can use a script to add inline styles when the page is loaded. Example (with jQuery):
<script>
$(document).ready(function() {
$("#test").css("color","blue");
});
</script>
Example without jQuery:
<script>
window.onload = function () {
document.getElementById("test").style.color = "yellow";
}
</script>
I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle