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.
Related
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 :)
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>
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 have a Zurb Foundation 3 navigation menu. When the page is on a phone, it correctly shows the phone version of my menu system.
However, the only way to activate the menu is to tap the down=arrow triangle on the right. I want to have the title also be active.
EDIT: Added this link to a simple working version of the home page.
Notice, tapping the bar or the word "menu" highlights the bar, but only the arrow makes the menu appear.
I am hiding the name ("Menu") on the desktop and showing it on the phone like so:
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name show-for-small">
<h1>Menu</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Left Nav Section -->
<ul class="left">
etc.
Since I expect a lot of people will tap on the title "menu" to access the menu I want to make it do the same as tapping the arrow on the right.
IF you adjust:
.top-bar ul > li.toggle-topbar {
cursor: pointer;
display: block;
height: 45px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
and change the width value to:
width 100%;
It will work - in your app.css add:
.top-bar ul > li.toggle-topbar {
width: 100%;
}
The CSS method is one way, but I would up modifying jquery.foundation.topbar.js, line 45 (which is the function below) I changed '.top-bar .toggle-topbar to '.top-bar .toggle-topbar, .top-bar .title'
$('.top-bar .toggle-topbar, .top-bar .title').off('click.fndtn').on('click.fndtn', function (e) {
e.preventDefault();
if (methods.breakpoint()) {
settings.$topbar.toggleClass('expanded');
settings.$topbar.css('min-height', '');
}
if (!settings.$topbar.hasClass('expanded')) {
settings.$section.css({left: '0%'});
settings.$section.find('>.name').css({left: '100%'});
settings.$section.find('li.moved').removeClass('moved');
settings.index = 0;
}
});
I want to change submit button of Web Forms for Marketers module with image in Sitecore.
Thank in advance
You can change the button by updating contents of the following file:
\sitecore modules\Web\Web Forms for Marketers\Control\SitecoreSimpleFormAscx.ascx
Replace
<wfm:FormSubmit ID="submit" runat="server" Class="scfSubmitButtonBorder"/>
with you own custom control (which can contain Image / LinkButton / whatever)
It sounds like you are trying to change the submit button into an <input type="image" />. I have not found a way to do this with WFFM. You can style the submit button, or you can export the form to ASCX and make the change to an image yourself.
You can do quite a bit with CSS styling of <input type="submit" />.
http://www.456bereastreet.com/lab/styling-form-controls-revisited/submit-button/
You can change the button style in Default.css.
Use background-image to add the image.
Below example use an image as background for the Submit button in WFFM:
.scfSubmitButtonBorder
{
background-image: url(/images/bg_button.png);
padding-left: 5px;
float: right;
margin-bottom: 10px;
}
.scfSubmitButtonBorder input
{
border: none;
padding: 0 5px 0 0;
color: white;
font: 14px/14px FrutigerRoman, Arial !important;
width: 100px;
height: 30px;
background-image: url(/images/bg_button.png);
background-position: right -30px;
background-color: transparent;
cursor: pointer;
}
I suppose you're talking about Web Forms for Marketers module, aren't you? It is not clear from your initial question...
Anyway, in Form designer you can select the submit button and you'll its properties on the left side. Among various properties, the very first is the edit box called "Button Name" . Put the desired text for the Submit button there.
Here's how I did it.
First, create a custom control:
namespace Sitecore.Custom.Controls
{
public class ImageSubmitButton : Sitecore.Form.Web.UI.Controls.SubmitButton
{
public string ImageUrl { get; set; }
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
if (string.IsNullOrEmpty(ImageUrl) == false)
{
writer.AddAttribute("type", "image");
writer.AddAttribute("src", ResolveUrl(ImageUrl));
}
// This won't overwrite our explicit type="image"
base.AddAttributesToRender(writer);
}
}
}
Export the form as ASCX in sitecore, use the Developer Center to create a new Sublayout and copy the exported ASCX code into this file. First, register a new prefix
<%# Register TagPrefix="ctrl" Namespace="Sitecore.Custom.Controls" Assembly="<AssemblyName>" %>
Finally, change
<cc0:submitbutton runat="server" onclientclick="$scw.webform.lastSubmit = this.id;" text="Submit" validationgroup="..." cssclass="..." id="..." onclick="OnClick" >
</cc0:submitbutton>
to
<ctrl:ImageSubmitButton ImageUrl="~/imgs/button.png" runat="server" OnClientClick="$scw.webform.lastSubmit = this.id;"
Text="Submit" validationgroup="..." cssclass="..." id="..."
OnClick="OnClick"></ctrl:ImageSubmitButton>
Finally, replace the form in your item with the sublayout.