Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo Multi Hover Effect On Blogger Images Using Pure CSS 2013
Seo Master present to you: Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over an image from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. This trick will change not only the images appearance when moving mouse over them, but will also allow you to add inside a text with a description.
You can see the effect on this image below: try moving your mouse from the left, right, and above.
Step 1. From Blogger Dashboard, go to Template and press the Edit HTML button
Step 2. Search for the </head> tag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box.
Step 3. After you found it, add the following style just above it:
Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image:
Step 5. Choose Posts, create a New Post, click on the HTML tab (1) and paste this code inside the empty box:
Important! Do not click on the Compose tab, otherwise the changes will be lost.
Step 6. After you finished editing your post, click Publish (4)
And that's it... enjoy! :)
2013, By: Seo Master
You can see the effect on this image below: try moving your mouse from the left, right, and above.
hover right hover top hover left hover bottom
Adding Hover Effect From Different Directions on Blogger Images
First thing to do is to add the CSS style to our Template:Step 1. From Blogger Dashboard, go to Template and press the Edit HTML button
Step 2. Search for the </head> tag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box.
Step 3. After you found it, add the following style just above it:
<style>Step 4. Save the Template
/* The container and the image */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}
/* The texts that, by default, are hidden */
div.multi-hover span {
color: #FFF;
font-size: 32px;
font-weight: bold;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s;
width: 100%;
}
/* And this is what will generate the effect */
div.multi-hover span:nth-child(1) { /* right */
background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* top */
background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* left */
background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bottom */
background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6);
left: 0;
top: 80%;
}
div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}
</style>
Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image:
Step 5. Choose Posts, create a New Post, click on the HTML tab (1) and paste this code inside the empty box:
<div class=multi-hover>Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" (2) and replace the url in blue with the image URL (3) where you want to apply the effect.
<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src="http://www.matrixar.com/-iNaV2hPrI7Y/UaNY2q0ETiI/AAAAAAAADio/TjGwDktvlPQ/s1600/flowers">
</div>
Important! Do not click on the Compose tab, otherwise the changes will be lost.
Step 6. After you finished editing your post, click Publish (4)
And that's it... enjoy! :)
2013, By: Seo Master
seo Create A Rollover Image Effect (change image on mouseover) 2013
Seo Master present to you: The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.
Demo: Place your mouse over the image below to see its rollover effect
Making Rollover Effect Image
You have the following code:
Change the colored texts as it follows:
1. URL ADDRESS
This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.www.matrixar.com
2. URL OF THE FIRST IMAGE GOES HERE
Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in blue with the url of the image that will appear when the cursor hovers over it.
Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.
You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.
That's it. Enjoy ;)
2013, By: Seo Master
Demo: Place your mouse over the image below to see its rollover effect
Making Rollover Effect Image
You have the following code:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
Change the colored texts as it follows:
1. URL ADDRESS
This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.www.matrixar.com
2. URL OF THE FIRST IMAGE GOES HERE
Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in blue with the url of the image that will appear when the cursor hovers over it.
Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.
You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.
That's it. Enjoy ;)
2013, By: Seo Master
seo CSS Basics. How to Apply Rounded Corners On Images #2 2013
Seo Master present to you: 
In the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply to some images.
What we will do is to upload an image as normal (HTML) and then add some rules in our style sheet that will transform the outer shape as a circle... or at least to appear round. This will depend on the proportions of image that we use.
In fact, we can apply this effect to any image, to all of an area or to all in our blog. That depends on your tastes.
Marking up HTML
Obviously the first thing we need for in order to round an image is an idem. The code could be more complicated, but an image is built within the img tag and basically looks like this:
Screenshot:
This is how we make it look something like the one from the left. Normally, it should also keep an alt text and sometimes it carries some forced dimensions (with width and/or height). When you upload an image, the code inside the Blogger editor also contains a link that is pointing to the original image.
But if we want to modify this image using CSS, we need to incorporate a class selector. We can add it in two ways: within the img tag or to a parent box. The name that I have chosen for the selector is roundedcorners:
Applying style to all homogeneous elements
But that selector alone will do nothing. It needs to be linked to a style rule that tells what to do with it. As much as we add classes, if these are not defined in the CSS, the appearance of the image (or a certain element) will not change.
To change the shape of all the images on our blog, this would be what we should add to our CSS:
And how it translates to your browser? As follows:
Search for images by name tag (img) and apply the following style:
Now that we have this rule in our style sheet itself, we can see the picture as we wanted - see the example on the right.
To declare a property correctly, we need to know what it does and how to write and you can find more info in many places, although W3C is the authority in this.
For example border-radius requires initially 4 values reading from left to right that represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you put a single value is understood that all four will be equal to that.
You should also know that when the value of the border exceeds the dimensions of the box, this border is adapted to form a circle.
How to Apply Style to the Elements of the Same Block
But surely we do not want all the blog images to be round, but only those that we choose, otherwise adding the above style in the head tag will make all of our blog images to take this shape. Before we used an HTML tag (img) and not a selector and that is why the style will affect all images.
To avoid this, we can do one of the things we saw at the beginning and that was to put the image inside a div with the roundedcorners class. In this way, only the images that are in a box with that class will be affected by the rule that will make them round.
But the rule then should not attack the img tag directly, but the roundedcorners selector. In this case, you should write it like this:
This means that this style applies only to images that are in a box with roundedcorners class.
Epilogue
To close the subtopic of rounding images, you have to keep in mind that if these are not square, instead of becoming circular, they will look oval.
To fix this we should add the width and height with the same measure (value in pixels), that is to force the image cropping and to make it appear perfectly circular. That was all!
If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;)2013, By: Seo Master
In the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply to some images.What we will do is to upload an image as normal (HTML) and then add some rules in our style sheet that will transform the outer shape as a circle... or at least to appear round. This will depend on the proportions of image that we use.
In fact, we can apply this effect to any image, to all of an area or to all in our blog. That depends on your tastes.
Marking up HTML
Obviously the first thing we need for in order to round an image is an idem. The code could be more complicated, but an image is built within the img tag and basically looks like this:
<img src="image_URL"/>
Screenshot:
But if we want to modify this image using CSS, we need to incorporate a class selector. We can add it in two ways: within the img tag or to a parent box. The name that I have chosen for the selector is roundedcorners:
<img class="roundedcorners" src="image_URL"/>
<div class="roundedcorners">
<img src="image_URL"/>
</div>
Applying style to all homogeneous elements
But that selector alone will do nothing. It needs to be linked to a style rule that tells what to do with it. As much as we add classes, if these are not defined in the CSS, the appearance of the image (or a certain element) will not change.
To change the shape of all the images on our blog, this would be what we should add to our CSS:
img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}
And how it translates to your browser? As follows:
Search for images by name tag (img) and apply the following style:
- a solid green border of 2 pixels
- margins (space outside the border) and padding (space inside the border) is set to zero
- the image is round at the four corners
Now that we have this rule in our style sheet itself, we can see the picture as we wanted - see the example on the right.To declare a property correctly, we need to know what it does and how to write and you can find more info in many places, although W3C is the authority in this.
For example border-radius requires initially 4 values reading from left to right that represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you put a single value is understood that all four will be equal to that.
You should also know that when the value of the border exceeds the dimensions of the box, this border is adapted to form a circle.
How to Apply Style to the Elements of the Same Block
But surely we do not want all the blog images to be round, but only those that we choose, otherwise adding the above style in the head tag will make all of our blog images to take this shape. Before we used an HTML tag (img) and not a selector and that is why the style will affect all images.
To avoid this, we can do one of the things we saw at the beginning and that was to put the image inside a div with the roundedcorners class. In this way, only the images that are in a box with that class will be affected by the rule that will make them round.
<div class="roundedcorners"><img src="image_URL"/></div>
But the rule then should not attack the img tag directly, but the roundedcorners selector. In this case, you should write it like this:
.roundedcorners img {
border: 2px solid #BADA55;
....
}
This means that this style applies only to images that are in a box with roundedcorners class.
Epilogue
To close the subtopic of rounding images, you have to keep in mind that if these are not square, instead of becoming circular, they will look oval.
To fix this we should add the width and height with the same measure (value in pixels), that is to force the image cropping and to make it appear perfectly circular. That was all!
If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;)2013, By: Seo Master
seo CSS Basics. How to Apply Rounded Corners On Images #1 2013
Seo Master present to you: This tutorial will explain how to change the outside border of any image using some simple CSS rules to make it round, but this is so easy to do, that I'm finally going to make this entry for other purposes.
The trick today that I'm going to publish in two parts is to help to understand at least a little of what CSS (Cascading Style Sheets) is. But very briefly that I'm not able to do a good comprehensive manual on the subject. For those who want to see a bit more, take a look at this link and for those who really want to learn thoroughly, I recommend to visit this site.
Introduction and terminology
Style sheets aim to help sort out what is the structure of a website and which is its format, its appearance. Thus, the CSS box model is essentially a box that wraps around HTML elements, and it dictates how those boxes are presented in terms of colors, fonts, width, backgrounds etc.
The advantage is that if in the future we decide to change something, we don't have to change all the pages one by one, but simply change the properties of one kind or another box from the style sheet and these changes will automatically apply in all the pages.
The style sheet is a set of rules, in turn composed of selectors and declarations. The selector is to be used as a nickname or name of what you want to configure from the sheet and apply to the HTML and declarations are properties that are assigned to the desired values (more information on CSS syntax)
Adding the CSS selector
Once we put for example the one above in our style sheet, we see that in our website... nothing happens. I said that the selector is what relates HTML and CSS so that if we want a box to take these values for width, background color, border and font size (that's what we defined earlier), we need to include the selector, thus:
What we have added is a rule that tells the browser to interpret that this box has to be of a certain type or class. A class that was mentioned earlier is called selector having some specific properties and values defined in the style sheet.
Now we'll see how this will change the look of the box, while all others that don't have the SelectorName name will follow the standard appearance.
Therefore, when we include a rule in a style sheet, or modify an existing one, what happens is that all boxes marked with that selector will change their appearance according to the properties-values that we have defined.
On the contrary, if we want that an unmarked box to change its appearance with the CSS rules defined, we'll add the appropriate selector.
Where to add the CSS style
The style can be put in a CSS file. The file is created with all the rules, you get the address and then include the following line in the header of your template. For Blogger, you can add it between <head> and <b:skin><![CDATA[/*:
Note: in blue is where the address of your CSS file should be added.
You can also add the style directly mixed with HTML, inserted between the style tags:
It can be inserted into a particular box, as well. In this case, you do not need to add any selector to indicate where the CSS style is:
In Blogger the rules are between the skin tags, which means they are between <b:skin><![CDATA[/* and ]]></b:skin>. If you edit the template, will find that there are many things in between. All this is CSS that marks the appearance of your blog.
In case we want to see the effect after changing the value of some propriety, we can click on the Preview button. We can also remove anytime a declaration or add another to the desired selector.
For those who don't want to touch the template, you can add the CSS directly by going to the Advanced section > Add CSS of your Template Designer.
That's enough for today. The next tutorial will discuss in more detail about how to add rounded corners to our images using CSS.2013, By: Seo Master
The trick today that I'm going to publish in two parts is to help to understand at least a little of what CSS (Cascading Style Sheets) is. But very briefly that I'm not able to do a good comprehensive manual on the subject. For those who want to see a bit more, take a look at this link and for those who really want to learn thoroughly, I recommend to visit this site.
Introduction and terminology
Style sheets aim to help sort out what is the structure of a website and which is its format, its appearance. Thus, the CSS box model is essentially a box that wraps around HTML elements, and it dictates how those boxes are presented in terms of colors, fonts, width, backgrounds etc.
The advantage is that if in the future we decide to change something, we don't have to change all the pages one by one, but simply change the properties of one kind or another box from the style sheet and these changes will automatically apply in all the pages.
The style sheet is a set of rules, in turn composed of selectors and declarations. The selector is to be used as a nickname or name of what you want to configure from the sheet and apply to the HTML and declarations are properties that are assigned to the desired values (more information on CSS syntax)
Once we put for example the one above in our style sheet, we see that in our website... nothing happens. I said that the selector is what relates HTML and CSS so that if we want a box to take these values for width, background color, border and font size (that's what we defined earlier), we need to include the selector, thus:
<div class="SelectorName">Text here</div>
What we have added is a rule that tells the browser to interpret that this box has to be of a certain type or class. A class that was mentioned earlier is called selector having some specific properties and values defined in the style sheet.
Now we'll see how this will change the look of the box, while all others that don't have the SelectorName name will follow the standard appearance.
Therefore, when we include a rule in a style sheet, or modify an existing one, what happens is that all boxes marked with that selector will change their appearance according to the properties-values that we have defined.
On the contrary, if we want that an unmarked box to change its appearance with the CSS rules defined, we'll add the appropriate selector.
Where to add the CSS style
The style can be put in a CSS file. The file is created with all the rules, you get the address and then include the following line in the header of your template. For Blogger, you can add it between <head> and <b:skin><![CDATA[/*:
<link href="syle.css" rel="stylesheet" type="text/css"/>
Note: in blue is where the address of your CSS file should be added.
You can also add the style directly mixed with HTML, inserted between the style tags:
<style>
.SelectorName {
background-color: #EAEAEA;
border: 1px solid #444444;
width: 200px;
font-size: 12px;
}
</style>
It can be inserted into a particular box, as well. In this case, you do not need to add any selector to indicate where the CSS style is:
<div style="background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here</div>
In Blogger the rules are between the skin tags, which means they are between <b:skin><![CDATA[/* and ]]></b:skin>. If you edit the template, will find that there are many things in between. All this is CSS that marks the appearance of your blog.
In case we want to see the effect after changing the value of some propriety, we can click on the Preview button. We can also remove anytime a declaration or add another to the desired selector.
For those who don't want to touch the template, you can add the CSS directly by going to the Advanced section > Add CSS of your Template Designer.
That's enough for today. The next tutorial will discuss in more detail about how to add rounded corners to our images using CSS.2013, By: Seo Master