I am trying to implement background image sprite hover effect from this CSS-tricks article: http://css-tricks.com/fade-image-within-sprite/
My problem is that the images do not align completely in the following case:
HTML:
<ul class="contact">
<li class="phone"><a class="bg_hover" href="#">Call me</a>
</li>
<li class="twitter"><a class="bg_hover" href="#">Follow me on Twitter</a>
</li>
<li class="email"><a class="bg_hover" href="#">Email me</a>
</li>
</ul>
CSS:
.bg_hover {
position: relative;
}
.bg_hover:after {
content:"";
background-image: inherit;
background-position: bottom left;
background-repeat: no-repeat;
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 1s;
}
.bg_hover:hover:after {
opacity: 1;
}
.contact {
margin-left: 60px;
}
.contact li {
float:left;
margin: 30px 15px 0 0;
font-style: italic;
}
.contact li a {
padding: 3px 0 0 25px;
height: 18px;
background-repeat: no-repeat;
display: block;
}
.contact .phone a {
background-image: url(http://i.imgur.com/9d9hdiL.png);
}
.contact .email a {
background-image: url(http://i.imgur.com/9d9hdiL.png);
}
.contact .twitter a {
background-image: url(http://i.imgur.com/9d9hdiL.png);
}
li {
list-style: none;
}
jsfiddle: http://jsfiddle.net/47Lngd4t/2/
Can you tell me where is the problem?
Your background-position isn't quite right. The image sprite you used is a pixel or two out. Change background-position to the following:
.bg_hover:after {
background-position: 0 -21px;
}
See demo here: http://jsfiddle.net/AndyMardell/47Lngd4t/3/
I changed
.contact li a {
padding: 3px 0 0 25px;
...
}
to
.contact li a {
padding: 2px 0 0 25px;
...
}
So, from 3px to 2px. Seems to align for me.
If You're talking about effect like here http://take.ms/a6ar2 simply add line-height for example 10px to .contact li a selector
There are also some other ways to get effect:
You can change padding of <a> elements
You can change background-position of image
Related
I have a sprite-sheet with 4 social sprite buttons that I can't get to work as list items after many hours of researching.
Each sprite button should take up the same background-position as in the sprite-sheet. I have even tried setting each background-position: 0 0; without success.
Any suggestions would be appreciated.
.s-1-facebook,
.s-2-tweet,
.s-3-google,
.s-4-email {
<!--background-image: url('http://i.stack.imgur.com/tpoaF.png');-->
background-image: url('images/sprites.png');
background-repeat: no-repeat;
display: inline-block;
list-style: none;
margin: -12px 0 0 -16px;
position: relative;
}
.s-1-facebook {
display: inline-block;
list-style: none;
background-position: 0 0;
width: 32px;
height: 32px;
position: absolute;
}
.s-2-tweet {
display: inline-block;
list-style: none;
background-position: -32px 0;
width: 32px;
height: 32px;
position: absolute;
}
.s-3-google {
display: inline-block;
list-style: none;
background-position: -72px 0;
width: 32px;
height: 32px;
position: absolute;
}
.s-4-email {
display: inline-block;
list-style: none;
background-position: -108px 0;
width: 32px;
height: 32px;
position: absolute;
}
<ul>
<li class="s-1-facebook">
</li>
<li class="s-2-tweet">
</li>
<li class="s-3-google">
</li>
<li class="s-4-email">
</li>
</ul>
Tips for using sprites in CSS
Let's take the image you provided as example. The image has 140px width and 32px height.
Since we have 4 equally distributed icons in the image, we can assume that every icon will have 35px width (140 / 4) and 32px height.
In order to make the sprite work, we will have to assign those width/height values to an element of our choose, in your case, we will use the tag a inside every li.
To change the icon shown in every class, we will use the CSS property background-position.
Since we already know that our sprite have 4 columns and 1 row, we will only need to use the x position (using factors of 35).
Example
ul.social {
list-style: none;
margin: 0;
padding: 0;
}
ul.social li {
float: left;
}
ul.social a {
background-image: url('http://i.stack.imgur.com/tpoaF.png');
width: 35px;
height: 32px;
display: inline-block;
}
ul.social li.s-2-tweet a {
background-position: -35px 0;
}
ul.social li.s-3-google a {
background-position: -70px 0;
}
ul.social li.s-4-email a {
background-position: -105px 0;
}
<ul class="social">
<li class="s-1-facebook">
</li>
<li class="s-2-tweet">
</li>
<li class="s-3-google">
</li>
<li class="s-4-email">
</li>
</ul>
Your comment for the background image is using HTML comment tags which are invalid in CSS and causing your sprite image to fail. Remove that line and you can be on your way.
I am trying to align a horizontal rule with the white line in my menu. And I want that alignment to stay when viewed on different screens. What's my best option for doing that? Image of what it needs to look like:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
float: right;
width: 51%;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display: block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
float: right
}
#resume_btn:hover {
background-position: 0 -68px;
}
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
<div id="head"></div>
</div>
You can achieve this by modifying slightly the CSS and HTML code, and using translation to move the menu items to the center of the screen.
To do this you need to:
Wrap everything in div with the border-bottom (e.g.: #head)
Float the page title (h1) to the left (although maybe it would be better to change its position to absolute or it may affect the menu links)
Wrap all the navigation elements in a div (e.g.: #menu) with absolute position positioned in the center of the #head (left:50%)
Transform the #menu div to translate it 50% of its width to the left. This could be achieved by adding this to its style:
transform:translate(-50%, 0%)
You can see a demo working here: http://jsfiddle.net/o4ff4thc/ or below:
* {
margin: 0;
}
#font-face {
font-family: jaapokkisubtract;
src: url('jaapokkisubtract.ttf');
}
body {
background-color: #ca3600;
}
#head {
height: 65px;
border-bottom: 3px solid white;
}
h1 {
color: white;
margin: 10px 0 0 10px;
font-family: jaapokkisubtract;
font-size: 50px;
float: left;
}
#work_btn {
display: inline-block;
width: 96px;
height: 68px;
background: url(http://i.imgur.com/7m1Eh9j.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#work_btn:hover {
background-position: 0 -68px;
}
#resume_btn {
display:inline-block;
width: 125px;
height: 68px;
background: url(http://i.imgur.com/x2eaW4T.gif) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
}
#resume_btn:hover {
background-position: 0 -68px;
}
#menu {
position:absolute;
left:50%;
transform:translate(-50%,0%);
height:20px;
width:245px;
}
<div id="head">
<h1>Alexander</h1>
<div id="menu">
<a id="resume_btn" href="resume.html" title="Resume">Resume</a>
<a id="work_btn" href="index.html" title="Work">Work</a>
</div>
</div>
I have a perfectly working html/css sprite nav. When each link in its unordered list is hovered over, the background sprite image changes as expected, for that specific item. I want to make the entire nav sprite move position based on which linked is hovered over, so that the effect for any one link changes the background for the entire unordered list.
Reason: the edges of each inline are not vertical, they are at a 45 degree angle, so changing a traditional block background doesn't work so well. Changing the entire background will accomodate and work perfectly.
Code in use currently:
CSS:
#nav {
position: relative;
float: right;
background: url('../gfx/nav.gif');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a:hover {
background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;
}
And the HTML:
<ul id="nav">
<li id="n1"><span>Home</span></li>
<li id="n2"><span>About</span></li>
<li id="n3"><span>Programmes</span></li>
<li id="n4"><span>Grants</span></li>
<li id="n5"><span>Publications</span></li>
</ul>
So how do I make the background sprite shift for the entire nav, vertically different amounts depending on which link is hovered over? Assuming this is possible without JS of any sort.
Thanks. :)
PS - As requested, current system presented on a jsfiddle - http://jsfiddle.net/NhL7E/
Note how the edges of each coloured link don't completely change on the hover - hence wanting to move the entire UL background as opposed to individual LI backgrounds.
ADDED AFTER MARKED AS ANSWERED
Thank you to Shive, Jcubed and Barry Dowd. All three responses were completely acceptable and each one of them achieved the target result. However the primary question still is truly unanswered - as no one has suggested an HTML/CSS only method to shift the entire background image sprite different increments, based on which link is hovered on.
If I could mark all three answers as accepted, I would. I chose to mark Barry's as this is the answer that was easiest to implement on my project. It required no graphical modification so I was able to use the existing sprite image. All answers had benefits over the others - less http requests by use of jQuery, smaller nav sprite by another and no JS/jQuery required... etc.
Once again thank you all - your responses, jsfiddles, answers... your time and effort in helping me is greatly appreciated!
Cas
Here you go:
You give each li a left and right margin of -4px (#n1 only add to right margin, #n5 only add to left margin)
You then need to add 8px to each li width (4px on the first and last)
Then add 4px to the left position of the li background image so -74px becomes -70px (leave the first as 0)
New CSS
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0 -4px;
border: 0;
padding: 0 0px;
list-style: none;
}
#nav li#n1 {
margin: 0 -4px 0 0;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 77px;
}
#n2 {
left: 74px;
width: 102px;
}
#n3 {
left: 167px;
width: 132px;
}
#n4 {
left: 292px;
width: 90px;
}
#n5 {
left: 375px;
width: 129px;
}
#n1 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
#n2 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -70px -46px no-repeat;
}
#n3 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -163px -69px no-repeat;
}
#n4 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -288px -92px no-repeat;
}
#n5 a:hover {
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -371px -115px no-repeat;
}
JSFiddle http://jsfiddle.net/NhL7E/12/
2 Solutions:
First, you can change your image so that it has extra space between each section of the navigation and has a transparent background. http://i60.tinypic.com/sq3xjn.png
This allows you to make each li have its own background that changes on its own without it effecting how the other parts oft he nav look.
#nav {
position: relative;
float: right;
/*background: url('http://i59.tinypic.com/25tapoi.jpg');*/
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 71px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
#n1 a{
width:77px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}
#n1 a:hover{
background-position:0 -23px;
}
#n2 a{
width:102px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}
#n2 a:hover{
background-position:-77px -23px;
}
#n3 a{
width:131px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}
#n3 a:hover{
background-position:-179px -23px;
}
#n4 a{
width:89px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}
#n4 a:hover{
background-position:-310px -23px;
}
#n5 a{
width:128px;
background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}
#n5 a:hover{
background-position:-399px -23px;
}
http://jsfiddle.net/gh6Aq/
The other options is to nest your li's in such a way that the element with the background image is the deepest element, then you can use hover states to change it's style.
Example:
<ul id="nav">
<li id="n1"><span>Home</span>
<li id="n2"><span>About</span>
<li id="n3"><span>Programmes</span>
<li id="n4"><span>Grants</span>
<li id="n5"><span>Publications</span>
<div class='backgroundElement'></div>
</li>
</li>
</li>
</li>
</li>
</ul>
Then:
#n1:hover .backgroundElement{
background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}
However this method basically kills the underlying structure of your navigation, so I would recommend using the first option.
As continued from comments, I am posting a jQuery(JavaScript) based solution because, the exact problem is that, we have background image on the ul and we are hovering over ul>li>a and there is no parent selector in CSS to manipulate parent elements's CSS property(baclground image of ul).
However using jQuery we can easily achieve it. So the jQuery code will be something like this.
$('#nav >li>a').on('mouseenter', function() {
var id = $(this).parent().attr('id');
switch (id) {
case 'n1':
$(this).parent().parent().css({
'background-position': '0 -23px'
});
break;
case 'n2':
$(this).parent().parent().css({
'background-position': '-0 -46px'
});
break;
case 'n3':
$(this).parent().parent().css({
'background-position': '0 -69px'
});
break;
case 'n4':
$(this).parent().parent().css({
'background-position': '0 -92px'
});
break;
case 'n5':
$(this).parent().parent().css({
'background-position': '0 -115px'
});
break;
}
}).on('mouseout', function() {
$(this).parent().parent().css({
'background-position': '0 0'
});
});
Here the benefit we get is that the background image is now loaded only once and not 5 times because each time someone hovered over the image previously was getting loaded again.
Here we just find the ID of the hovered element and re-position the ul's background image accordingly.
You will also not need the additional code for :hover in the CSS, so the CSS code will be something like this.
#nav {
position: relative;
float: right;
background: url('http://i59.tinypic.com/25tapoi.jpg');
width: 498px;
height: 23px;
margin: 110px 2px 0 0;
border: 0;
padding: 0;
}
#nav li {
position: absolute;
top: 0;
margin: 0;
border: 0;
padding: 0;
list-style: none;
}
#nav li, #nav a {
height: 23px;
display: block;
}
#nav span {
display: none;
}
#n1 {
left: 0;
width: 73px;
}
#n2 {
left: 74px;
width: 94px;
}
#n3 {
left: 167px;
width: 124px;
}
#n4 {
left: 292px;
width: 82px;
}
#n5 {
left: 375px;
width: 125px;
}
JSFiddle Sample
Basically, I am new to using CSS Sprites and wish to do so for icon navigations. Basically, at the moment i have created a sprite which consists of two icons, 21px x 21px and the document size is 21px x 43px.
.nav-main {
position:relative;
top: 19.5px;
}
.nav-main li a {
background-image:url(../images/nav_sprite.png);
background-repeat: no-repeat;
height: 21px;
width: 21px;
display: block;
}
.nav-main li a.1 {
background-position:0px 0px;
}
.nav-main li a:hover.1 {
background-position:0px -23px;
}
That's my attempt, i tried another way where i removed the height and width of the nav-main li a however when i did this i was left with no image. Then i had to do it so that i had a text-indent to remove the text and still display the image but it didn't display the whole image.
The image is the navigation one that looks like this
I would use a screenshot but i am not able to include an image yet :) But yeah i want this to work but it's being an absolute pain.
Any ideas?
You can't use "numbers" as class name. Change to:
.nav-main li a.one {
background-position:0px 0px;
}
.nav-main li a:hover.one {
background-position:0px -23px;
}
I also cleaned up this block of CSS too.
.nav-main li a {
background-image:url(../images/nav_sprite.png) no-repeat; // put no repeat on the same line
height: 21px;
width: 21px;
display: block;
background-position:0px 0px; // you can put this here as your base...the a.one is not needed. If you go this route, just remove ".nav-main li a.one" css function, but keep the "a:hover"
}
You can't use numbers for class names, so
.nav-main li a.1 { /*wrong*/
.nav-main li a.link1 { /*good*/
When using background images for sprites, you are making your site inaccessible. Background images are not visible to low vision users that are using high-contrast mode. The Following is from Yahoo's Accessibility Blog, and is a good example of accessible sprites.
The HTML:
<div role="toolbar" class="toolbar">
<button type="button" class="prnt">Print</button>
<button type="button" class="find">Find</button>
<button type="button" class="save">Save</button>
<button type="button" class="sets">Settings</button>
<button type="button" class="info">Info</button>
</div>
The CSS:
.toolbar {
border: 1px solid #666;
background: #ddd;
padding: 3px;
font-size: 0;
/* Eliminates white space below and between buttons */
}
.toolbar button {
border: 1px solid #333;
background: #bbb;
padding: 0;
margin: 0 3px 0 0;
width: 36px;
height: 36px;
overflow: hidden;
vertical-align: top; /* Needed for Firefox to ensure buttons are properly aligned inside the toolbar. */
}
/* Remove the extra padding and border given to buttons by
default in Firefox to ensure correct alignment of the img. */
.toolbar button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* The above rule removes the focus outline in Firefox. This rule restores it. */
.toolbar button:focus {
outline: dotted 1px #000;
}
/* Hide the text label by inserting an image before it. */
.toolbar button:before {
display: inline-block;
content: url('http://findicons.com/files/icons/2340/preview/toolbar_icon_set_full.png');
}
.toolbar button {
*background: url('http://findicons.com/files/icons/2340/preview/toolbar_icon_set_full.png') no-repeat;
*text-indent: 36px;
}
.toolbar .prnt {
*background-position: -38px -74px;
}
.toolbar .prnt:before {
margin: -73px 0 0 -37px;
}
.toolbar .find {
*background-position: -182px -146px;
}
.toolbar .find:before {
margin: -145px 0 0 -181px;
}
.toolbar .save {
*background-position: -146px -74px;
}
.toolbar .save:before {
margin: -73px 0 0 -145px;
}
.toolbar .sets {
*background-position: -74px -110px;
}
.toolbar .sets:before {
margin: -109px 0 0 -73px;
}
.toolbar .info {
*background-position: -146px -146px;
}
.toolbar .info:before {
margin: -145px 0 0 -145px;
}
For the hover effect, you can use the class and the psuedo selector :hover to adjust the margins to the appropriate values.
Please take a look at this fiddle: http://jsfiddle.net/SkjHs/4/
<html>
<ul class="langBar">
<li> <img src="http://goo.gl/aIxpv"> </li>
<li> <img src="http://goo.gl/wIQob"> </li>
<li> <img class="activeLang" src="http://goo.gl/If4lA"> </li>
</ul>
</html>
html {
background-color:#000;}
.langBar{
display: block;
overflow: hidden;
float: left;
width: 125px;
}
.langBar li{
display: block;
width: 32px;
height: 40px;
float: left;
margin-left: 7px;
padding: 0px;
}
.activeLang{
-moz-border-radius: 20px;
width: 32px;
height: 32px;
border-radius: 20px;
border: 2px solid #482663;
}
.langBar li a{
display: block;
height: 100%;
width: 100%;
}
I'm trying to achieve some nice glow effect around activeLang class image. First problem is, i'm getting padding between border and image itself. Second can't get glow effect. Any suggestions?
First of all the padding of the image is because of image canvas My Fiddle
Image with canvas cropped
Add the below CSS to .activeLang for glow like effect to your image...(Ofcourse you can change colors as per your choice)
box-shadow: 0 0 3px 3px #888;
And Remove from .activeLang
width: 32px;
height: 32px;
Such a glow effect could be realized via a box-shadow:
/* pink glow effect */
box-shadow: 0 0 5px 5px #f3a;
See http://jsfiddle.net/SkjHs/8/ for an example with glow effect.
Or (as I would set it up) a solution without using img-tags:
<ul class="langBar">
<li>[AZ]</li>
<li>[EN]</li>
<li>[RU]</li>
</ul>
.langBar {
overflow: hidden;
}
.langBar li{
display: block;
float: left;
margin-left: 7px;
padding: 0px;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
margin: 5px 0;
overflow: hidden;
text-indent: 110%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.icon:focus, .icon:active, .icon:hover,
.icon.active {
-webkit-box-shadow: 0 0 5px 5px #f3a;
-moz-box-shadow: 0 0 5px 5px #f3a;
box-shadow: 0 0 5px 5px #f3a;
}
/* one may use a sprite and only set the background position here */
.icon-az {
background-image: url(http://goo.gl/aIxpv);
}
.icon-en {
background-image: url(http://goo.gl/wIQob);
}
.icon-ru {
background-image: url(http://goo.gl/If4lA);
}
http://jsfiddle.net/SkjHs/10/
Even when using border-radius, a border won't go inside the element. The few pixels at the edge of each image file force the border outside of the content of your image.
I recommend editing your image to remove the spacing, or even to add all of the effects you want on rollover.
As an example of spriting making shorter work of the issue:
<ul class="langBar">
<li><a id="az" href="?lang=az&page=main"></a></li>
<li><a id="en" href="?lang=en&page=main"></a></li>
<li><a id="ru" href="?lang=ru&page=main" class="activeLang"></a></li>
</ul>
html {
background-color:#000;}
.langBar{
display: block;
overflow: hidden;
float: left;
width: 125px;
}
.langBar li {
display: block;
width: 32px;
height: 32px;
float: left;
margin-left: 7px;
padding: 0px;
}
.langBar li a {
background: url(https://lh5.googleusercontent.com/orZ4dkDz2lBVJMB7D0Pb2fBHB8JPLcD8r2xqSYw-e3K7K2G427Ws_iqNbcYF1U2X36ju1y3eVy0) no-repeat 0 0;
display:block;
width:32px;
height:32px;
}
.langBar li a#az {
background-position:0 0;
}
.langBar li a#en {
background-position:0 -32px;
}
.langBar li a#ru {
background-position:0 -64px;
}
.langBar li a.activeLang,
.langBar li a#az.activeLang,
.langBar li a#en.activeLang,
.langBar li a#ru.activeLang {
background-position-x: -46px;
}
Thought this was a little lengthy, which is why I put this in a jsFiddle:
http://jsfiddle.net/mori57/n3Q74/
Hope this helps!