How to Show Play Icon On Image Hover

Recently I was testing some little strategy on my projects in which I need to show play icon on image hover. Showing play icon on image when someone navigate the cursor on that image. This was slightly tricky for me but I did it in a short while. So going to share this experience with my readers, which can learn from it and can do it better than this.

How to Show Play Icon On Image Hover

How to Show Play Icon On Image Hover:

In this guide we will show play icon on image hover with little work on HTML & CSS. You can use simply use your personal computer notepad to run below coding.

HTML Code:

<div class="itemsContainer">
<div class="image">
<a href="https://www.youtube.com"> 
<img src="http://www.example.com/Your-Pic.jpg" /></a>
</div>
<div class="play">
<a href="https://www.youtube.com">
<img src="http://www.example.com/Hover-Pic.png" /></a>
</div>
</div>

Above HTML, we also added link on Icon or the entire icon overlay. When someone click on icon then link would be work perfectly.

CSS Code:

<style>
.ImageContainer {
background: white;
    float: left; //It also can be right OR left
    position: relative;
    width: 300px; // You can change its width OR height
    height: 300px;
    margin-right: 20px;
}
.ImageContainer:hover .play{display:block}
.play{
  position: absolute;
  display: none;
  top: 0%;
  margin: 0 auto;
  left: 0px;
  right: 0px;
  z-index: 100;
  opacity: 0.9; // Reduce the opacity to increase the background pic visibility
}
</style>

Above CSS is pretty straight forward to go ahead. First one section handles the image styling only.

ImageContainer

Whereas, second one shows the image hover styling. We setup recommended opacity but you can reduce it as you like to see it, opacity reduce the image hover colors or overlay and increase the actual background image visibility.

ImageContainer:hover

Furthermore, you can itself add your own custom CSS or html to modify the above code as your requirements.

Let us know, if you find this guidelines useful and valuable. Simply test this code in your code editors and if you found any issue or error then join us on our community forum to directly interact with us.

How to Make Responsive Tables

How to Make Responsive Tables:

Website main objective is to serve user with maximum approach. Responsive website is the biggest goal in this era because responsive website might grab many users with maximum range. Sometime we have responsive theme but some elements are not responsive. HTML table is one of the element, may be you are going to add pricing tables on site but when someone open your site from mini devices then he can not able to see accurate information in positive manner. So, responsive tables is the crucial element of responsive website and we can’t overlook it. For this purpose, We will show you that how to make responsive tables with minimum efforts.

How to Make Responsive Tables

To make responsive tables, first Download ZURB responsive tables zip file for give the appropriate shape to tables. You can use the above given source for downloading and review the below screenshot.

How to Make Responsive Tables

After getting above ZURB responsive tables zip file, Now you need to concentrate on it to go ahead. Zip file contains few stylesheets and java query files, which helps to make tables fully responsive. Now extract this zip file to any specific folder, after do that, open your code editor and add few below HTML lines, Copy the below HTML table code and paste into any editor.

<table class="responsive">
 
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 <th>Header 3</th>
 <th>Header 4</th>
 <th>Header 5</th>
 <th>Header 6</th>
 <th>Header 7</th>
 <th>Header 8</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 <td>row 1, cell 3</td>
 <td>row 1, cell 4</td>
 <td>row 1, cell 5</td>
 <td>row 1, cell 6</td>
 <td>row 1, cell 7</td>
 <td>row 1, cell 8</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 <td>row 2, cell 3</td>
 <td>row 2, cell 4</td>
 <td>row 2, cell 5</td>
 <td>row 2, cell 6</td>
 <td>row 2, cell 7</td>
 <td>row 2, cell 8</td>
 </tr>
</table>

Grab the above code and paste to any code editor, Now its time to establish link among these downloaded CSS files and this simple HTML table, which you created couple a minute ago. For this purpose, we will add few lines before table tag, which will connect those elements. You can see these lines below,

 <!-- Combine and Compress These CSS Files -->
 <link rel="stylesheet" href="stylesheets/globals.css">
 <link rel="stylesheet" href="stylesheets/typography.css">
 <link rel="stylesheet" href="stylesheets/grid.css">
 <link rel="stylesheet" href="stylesheets/ui.css">
 <link rel="stylesheet" href="stylesheets/forms.css">
 <link rel="stylesheet" href="stylesheets/orbit.css">
 <link rel="stylesheet" href="stylesheets/reveal.css">
 <link rel="stylesheet" href="stylesheets/mobile.css">
 <!-- End Combine and Compress These CSS Files -->
 <link rel="stylesheet" href="stylesheets/app.css">
 <link rel="stylesheet" href="responsive-tables.css">
 <script src="javascripts/jquery.min.js"></script>
 <script src="responsive-tables.js"></script>

Just you need to do only add these above lines before closing head tag. You clearly can see, every above line consist a specific CSS stylesheet name, which convert this simple HTML table to responsive table. But few are most important in these above lines like last three,

 <link rel="stylesheet" href="responsive-tables.css">
 <script src="javascripts/jquery.min.js"></script>
 <script src="responsive-tables.js"></script>

Above scripts lines are most important, Specially these files are most compulsory include responsive-tables.css, jquery.min.js, responsive-tables.js to build responsive table. Further globals.css,typography.css, grid.css etc are optional but can use for build table more stylish.

Note:

A concise note before going to compile process, CSS files and HTML table file should be in the same folder then connection can be built among those files. Secondly above code class="responsive", which we used in HTML table tag code, is to create the connection between Cascading files and HTML. So, don’t be panic.

Summing up the both HTML table code and ZURB responsive tables css framework, you can create attractive or fully responsive tables without any hesitation. If you like this then must share with your friends and relations. Don’t forget your precious feedback. 😉

CSS Syntax – Selectors

CSS Syntax:

In the earlier lesson, we slightly accomplished CSS introduction. In that lesson, We would deal with CSS syntax. CSS syntax contains a group of selectors and declaration portion. CSS syntax have its own three factors respectively,

  1. Selectors
  2. Property
  3. Value

CSS Syntax

Selector is just like a name of block and this block could have multiple properties with values. Selector name could be anything else but relevant with your requirement like ContentBody {  }.In which ContentBody is a selector name and all declarations factors like properties and values enclosed inside these curly brackets {  }. For better understandable view, See the below example:

ContentBody {
      background-color:#00F;  
      font-size:12px;
}

In the above CSS syntax, Inside {  } curly brackets declaration factors are existing. These declaration factors have two fragments, First is property and second is Value of this property. Take the above example, Above code have three properties such as background-color , font-size. Slightly ahead, These properties have specific values such as, #00F , 12px. All declaration will be ended with semi-colon. You can manipulate the above CSS code in a single line but it will look like complicated therefore for flexibility and better understanding write separately with each other. Every declaration consist on property and its value and finally this declaration will be ended with semicolon. Keep remember that, semicolon will be used end of the declaration and among the property & value, We will use simple colon.

Comparison the above given example CSS with the above image and find out the each factor easily. You can utilize these CSS with paragraph selectors and heading selectors etc. See the below example.

p {
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;
 color:#000;
 float:left;
 }

Similarly CSS for headings,

h1{
 font-size:30px;
 color:#F90;
 }

Above both CSS have same scenario like previous but selector name belongs to paragraphs and heading respectively. If you have queries concern with CSS syntax then please If you have queries concern with CSS syntax then consult with us. 🙂

What is CSS & How we write

What is Cascading Style sheets (CSS):

CSS stands for Cascading style sheets and used for give an attractive look of any specific document. Cascading style sheets created and founded in 10 Oct 1994 by Hakon Wium. The disclosure of CSS gave the finest idea to developers to make his developing appearance more attractive. Nowadays, Developers have sturdy control over the CSS. Now the cost of struggle is effective for developers and better than past.

What is Cascading Style sheets

Almost the usage of CSS in hyper text markup language (HTML). Often times, We utilize it in web designing interface. In simple words, CSS give an effective and magnificent look to the web interface. CSS keeps his file in separate CSS files folder, We  just place or use CSS file reference on html head section to utilize it. Before go ahead, You need to care about few things. Before start CSS, you should slightly know about HTML .

CSS designed with more flexibility, Because front file (HTML) and CSS file, Both are located on different places in different folders. But both are connected and enabled to get access with each other. Separation of HTML & CSS establish improvement in coding and makes able to understand. CSS demand is increasing day by day same as HTML . CSS have numerous elements like backgrounds, fonts, layout, width and height etc.

How we Write CSS:

Writing CSS is same like HTML but CSS syntax is changed to html. CSS writing pattern is little bit different because in which we deals with selectors. Selectors express the block of CSS, Which is applies to specific or relevant attribute inside markup HTML file. Usually, CSS selectors .header { font-family:"Arial"; } & #myClass{ }, First selectors defines that, this selector CSS will be applies on site header and secondly selector defines the same thing but refer to another part of markup.

Selectors could be any name like variables, Which we use for reference or attribute inside markup language. See the below CSS syntax and selector example with several CSS elements to understand the entire criteria.


In the above CSS code, We initially start with <style>...</style> Blocks and all CSS elements are enclosed in it. Inside <style>...</style> Blocks, We can write various CSS elements to make own web page attractive as according our need. After write <style>...</style> tags, We created custom selector name is #myClass. This particular selector represents and connected with markup attributes directly. This means that,Both CSS & HTML are working Collaboratively. Above CSS code contains numbers of elements like background color font width and font-size etc.

You can write CSS coding inside simple notepad, Otherwise choose best code editors to accomplish own need. After writing code procedure, Now its time to save your CSS file with .css extension like Demo.css.  if you want further counseling with us then please discuss below. 🙂