Want to rotate one image to left, and then the other one to the right.
Something I really can't figure out why, the first part using last-child doesn't work, while the second works, any idea what the problem is?
Thanks!
<div>
<img scr="pic-a.jpg"></img>
<img scr="pic-b.jpg"></img>
</div>
img {
width: 45%;
transform: rotate(7deg);
&:last-child {
transform: rotate(-7deg);
}
}
/* the above doesn't work */
img {
width: 45%;
transform: rotate(-7deg);
&:first-child {
transform: rotate(7deg);
}
}
/* this works */
There must be something else messing up your code, as I tried to reproduce your error, it seems to work for me in both ways. Try it yourself.
One thing I also noticed was that your HTML is invalid. Your src attribute is misspelled and you don't need a closing img tag.
<div>
<img src="http://i.imgur.com/AzeiaRY.jpg"/>
<img src="http://i.imgur.com/AzeiaRY.jpg"/>
</div>
Related
Im trying to select img tags based on the alt attribute to load proper background-image on mobile
the problem is not matter what combination of attribute selector I use it seems it doesnt work, I cant even select the tag I want with it
I used these
img[alt="Chelo Kebab"] {opacity: 0.5}
img[alt*="Chelo Kebab"] {opacity: 0.5}
img[alt^="Chelo Kebab"] {opacity: 0.5}
i used all combinations, capital, normal even I tried
img[alt] {opacity: 0.5}
but no success
also I tried to put parent class name before img
you can see the code Im working on in this address
here
Im trying to select each img tag
here is the proof that I write everything correct
UPDATE Its obvious now its a CACHeING problem, Im trying to solve
There is no problem with attribute-selectors for iamges in css:
img[alt="abc"] {
opacity: 0.8 !important;
}
img[alt="def"] {
opacity: 0.5 !important;
}
img[alt="ghi"] {
opacity: 0.3 !important;
}
img[alt] {
opacity: 0.1;
}
<img src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="abc" src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="def" src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="ghi" src="https://dummyimage.com/200x100/000/fff" /><br />
Note that because you have a more general selector in your code (img[alt]) I added the !important to the properties to override the opacity in your general selector.
I have an issue that i'm not able to solve yet and I'd be really glad if someone could help ! I want to set a scroll effect (that reverse scroll) on a div which contains few images. To be more precise, images are randomly positionned into a div (scroller) with a huge height, this div is also inserted in another div (wrapper = to hide scrollbars). I'd like to make the bottom of this long div on top of screen (with a bit offset inside) and then allow user to scroll into this div. Images should slide down to bottom of screen gradually while scrolling. The user can scroll from the bottom to the top of the div, making images disappear one after the other. I make some screenshots of the expected effect. I tried some 'parallax scrolling' codes but I can't make it work, and I'm not sure that's the best solution for what I'm looking for (I only found background-image examples).
Here's the related piece of code :
------
HTML :
------
<div id="scroller-wrapper">
<div id="scroller">
<div id="img-defile1" class="img-defile">
<img src="img/image.jpg"/>
</div>
...
<div id="img-defile20" class="img-defile">
<img src="img/image20.jpg"/>
</div>
</div>
</div>
------
CSS :
------
#scroller-wrapper {
top:0;
width:102vw;
height:100%;
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
}
#scroller {
top:-600vw;
left:0;
max-width:100%;
width:60%;
height:1250%;
position:relative;
z-index:800;
}
.img-defile {
display:block;
max-width:100%;
height:auto;
position:absolute;
overflow:hidden;
}
.img-defile img {
width:600px;
}
.custom-scroll {
height: calc(80% - 20px);
}
-----------
JS/Jquery :
-----------
$('#scroller').scroll(function () {
if ($(this).scrollTop() > 0) {
$('#scroller').addClass("custom-scroll");
} else {
$('#scroller').removeClass("custom-scroll");
}
});
$('.img-defile').each(function(i) {
$pT=$("#scroller").height();
$pL=$("#scroller").width();
$(this).css({
top:Math.floor(Math.random()*$pT),
left:Math.round(Math.random()*$pL)
});
});
Thank you in advance for your answer(s) !
I also asked this question on the french Alsacréation platform and Tris TOON helped me to solve this out. Please follow this link to see his demonstration. It was quite simple to apply and concerns only the CSS part. In my case, I only had to add 'transform: scale(1, -1);' on my wrapper and scroller to get the intended effect.
So a word to the wise !
Many thanks anyway and see you soon :)
I have a circle+arrow next to a text in a CTA button and i'd like both to change color at the same time when hovering over either of them. Right now when hovering over the text the arrow does not change color, not sure how to write the :
<div class="cta-div">
<a class="cta-btn" href="#" role="button">SAVE NOW <i class="fa fa-
chevron-circle-right " style="font-size:34px;color:#efd43d; vertical
-align:middle; padding:0 0 3px;"></i></a>
</div>
sass rule:
.cta-btn, .fa-chevron-circle-right {
&:hover {
color: $btn-bkg-hover-color !important;
}
}
I have set this up and working in a fiddle: https://jsfiddle.net/roob/9Lsjstf7/1/
Any help is appreciated. If this is a duplicate post then please post a link.
You do not hover on them separately - you just hover on the anchor and when you do that you also hover the child so:
.cta-btn:hover, {
color: #e8e2bb !important;
.fa-chevron-circle-right {
color: #e8e2bb !important;
}
}
Not sure about the !important ... left it as you may need it for some reason.
I am trying to get the effect shown here https://www.kogevitamins.com/
Where you hover over the "learn more" link to get the opacity of the image to also change.
Thanks.
Edit:
Right now I have
for HTML
<img src="/images/pill.png" alt="description" id ="image" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
For jquery
$("#button").hover(function(){
$("#image").animate({opacity:1},300);
}).mouseout(function(){
$("#image").animate({opacity:0.6},300);;
});
It doesn't seem to work so far
Edit:
I have the following code recently updated but the hover on effect doesn't work for me. Heres a link to the thing I'm trying to get to work http://maninkorean.com/
<div class ="product-content">
<img class="imgClass" src="/images/pill.png" alt="description" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
</div>
$("a#button, img").hover(function(){
$("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
$("img.imgClass").animate({opacity:0.6},300);;
});
img.imgClass{
opacity: 0.6
}
#button {
padding: 10px 24px;
background:#F15951;
border: medium none;
border-radius: 3px 3px 3px 3px;
color:white;
margin-top:50px;
margin-bottom:50px;
font-weight: bold;
}
You should be able to do this using jQuery with the following code:
$('#id of link you want to use to change opacity').hover(function() { $('#id of image that you want to change opacity of').css({ 'opacity' : 0.25 }); });
Combine JQuery and CSS3's opacity features to wire up an "OnHover" event to the images that changes the opacity of the said image.
http://www.css3.info/preview/opacity/
Unless you want to see through those images and show background pattern, there is no need to deal with opacity.
Even though you can prepare semitransparent version of image and change src attribute in onMouseOver event.
But you can achieve the same effect by simply putting a div with 1-pixel semitransparent background above selected image.
Using CSS opacity will cut off older browsers.
Hi You can easily do this by css, with somethings like this:
.img {opacity:0.4; /*some more css*/ } /* (opacity:) is now supported by all browsers */
.img:hover {opacity:0.98; /* Some more css be creative... */ }
That's all!
Here's some html, css, jquery that shows how to do it:
<div></div><a>Hover On Me</a>
div{
width:300px;
height:300px;
display:block;
background:red;
opacity: 0.6
}
a{
display:block;
margin-top:20px;
width:100px;
padding:5px;
height:20px; border-radius:5px;
background:yellow;
}
$("a").hover(function(){
$("div").animate({opacity:1},300);
}).mouseout(function(){
$("div").animate({opacity:0.6},300);
});
http://jsfiddle.net/Rd5Yy/2/
It looks like in the specific example you cite, they've used CSS3 transitions. See here for a tutorial: http://www.w3schools.com/css3/css3_transitions.asp
In a nutshell using these you can do all kind of funky effects without any javascript. CSS3 is supported by modern browsers (but is pretty cutting edge as web technologies go) and isn't yet a W3C standard.
This code should do what you wanted to do (I tested it against your HTML):
$(document).ready(function() {
$("#button").hover(function(){
$("#image").animate({opacity:0.6},300);
}).mouseout(function(){
$("#image").animate({opacity:1},300);;
});
});
Okay, I just checked out your page. Firstly, it looks like jQuery is not working through the $ on your site, so you'll need to either troubleshoot that, or use it by jQuery instead. I pasted this code in on the JavaScript console on your site and it works:
jQuery("a#button, img").hover(function(){
jQuery("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
jQuery("img.imgClass").animate({opacity:.6},300);;
});
edit: Looks like you got it working as I was typing up this response
i am struggling with the CSS of an unordered list which i want to use in order to provide links to a number of online profiles. the list is displayed in the footer of every page, like so (bottom right): http://www.alexbrunner.com.
my understanding is the following:
either, i make use of the CSS property 'display:inline-block;' - but given its relatively poor cross-browser support i would prefer not to.
or, i float the list and define the 'inline'-characteristic on the ul-level - here, however, is where my trouble begins.
if i float the li-elements left, it is obviously positioned on the wrong side of the text. if i float the li-elements right, obviously each item is floated to the right of the following item, which results in my list being displayed in the reverse order.
the html is:
<div id="footer-right">
<p>E-mail me at mail#alexbrunner.com<br />or visit my profiles at <ul id="profiles">
<li><img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /></li>
<li><img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /></li>
<li><img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /></li>
<li><img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /></li>
</ul></p>
</div>
and the css is:
#footer-right { float:right; width:17em; border:0; border-top:1px dotted #333; text-align:right; margin:0; padding:1.25em 0; }
.profile { width:1em; height:1em; margin-left:0.3em; }
#footer-right p { display:inline; font-size:.75em; color:#666; }
#footer-right ul { display:inline; margin:0; padding:0; }
#profiles li { float:right; list-style:none; }
of course, i could just reverse the order in my html document and start with the last - but i really want to figure out what is the semantically correct way of doing this. i am sure there is a better way than what i have applied and i would really appreciate any comments on this.
eventually i want to put all those icons in a sprite - but i figure i have to solve this issue here first.
thank you!
best,
alex
Try this instead:
#profiles li { display: inline; list-style:none; }
http://jsfiddle.net/AcTu7/1/
This should display semantically and you don't have to bother with floats.
Not sure from reading if this is what you are looking for:
http://jsfiddle.net/RSMFw/
To maintain the desired display order, apply float: left; to ALL of the child elements of your div#footer-right, i.e: #footer-right * { float: left;}
Example: http://jsfiddle.net/wqneM/