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.
Related
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
My first post & can't find anything on here that matches what I need to know unfortunately!
I'm not an experienced coder but I've been picking it up but essentially the goal is to use the same snippet of html & CSS code for 2 sections on the website. Th difficulty is coming in when I change the opacity when on & off hover. One i want to remain at }
`}
.fade:hover
{
opacity:1;
}
.fade
{
opacity:0.8;`
And the other I need at
`}
.fade:hover
{
opacity:1;
}
.fade
{
opacity:0.2;`
The latter is taking charge and changing the opacity of the original. Is there a tag that will separate the two?
Many thanks! Any help appreciated!!
CSS stands for Cascading Style Sheet, which means it reads down the file, and whatever is read last, is what will apply. So if you have 2 definitions for the same class, the latter will override the former. This is why you're only seeing the second action.
To get around this, instead of using 1 class for both buttons, use 2 classes.
.fade1 {
opacity: .2;
}
.fade2 {
opacity: .8;
}
.fade1:hover {
opacity: 1;
}
.fade2:hover {
opacity: 1;
}
But even better you could simplify this down to just 3 by doing:
<!-- HTML code -->
<p class="fade fade1">some text</p>
/* CSS style */
.fade1 {
opacity: .2;
}
.fade2 {
opacity: .8;
}
.fade:hover {
opacity: 1;
}
The problem you are having is caused by the fact the CSS cascades (CSS = Cascading Style Sheets). What this means is that because you define the same class styles (.fade) twice, the instance that is defined last in the file will take precedence and overwrite the other.
What you can do to solve this is either use an additional class name or increase the css styles' specificity (meaning how specific you are in your CSS selectors).
Example 1, using an additional class:
.fade {
opacity: .8;
}
.fade2 {
opacity: .2;
}
.fade:hover, .fade2:hover {
opacity: 1;
}
Example 2, increasing specificity:
.section1 .fade {
opacity: .8;
}
.section2 .fade {
opacity: .2;
}
.fade:hover {
opacity: 1;
}
Html would look something like this:
<div class="section1">
<div class="fade">some content</div>
</div>
<div class="section2">
<div class="fade">some other content</div>
</div>
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;
}
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
#world1 {
background: url(/images/home/1.jpg) 0 0 no-repeat;
float: left;
width: 2%;
height: 4%;
position: absolute;
top: 0%;
left: 0%;
z-index: -1;
margin-top: -20px;
margin-left: -20px;
}
#world1:hover {
background-position: 0 -40px;
cursor: pointer;
I have many (about 100) of these #world(number) divs on a single page. The only thing that changes are the top and left values and the background jpg source. Everything else is the same so clearly it is a huge amount of code. Is there some way I can avoid copying the content that remains the same between all divs and only change the absolute position and background source of each individual div?
Thanks
Also give the div a class, for example: class="worlds".
And put all the generic styling in that class
.world { generic styling }
#wordl1 { custom styling }
Would it be acceptable to add a shared class to all of the #worldN divs?:
.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }
And in your HTML:
<div class="world" id="world1"></div>
<div class="world" id="world2"></div>
Use classes for common style for all divs, and id's for unique style:
HTML:
<div class="myClass" id="div1" />
<div class="myClass" id="div2" />
<div class="myClass" id="div3" />
<div class="myClass" id="div4" />
CSS:
.myClass
{
///all your repeating CSS
}
#div1{}
#div2{}
#div3{}
#div4{}
You can group same rules of many elements with their class: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2
ID will be used to apply UNIQUE styles.
Yes, just put everything that's common into a div css optionally giving it a class that the div must include then just add the specialist css to each world div. Note you can also do class="class1 class2 class3" to use more than one css class.
Take a loot at http://sass-lang.com/