WordPress beautification: Mockingbird Begin theme home page reading full text button beautification

one thousand four hundred and twenty-one
article

July 2, 2018 00:15:38 WordPress comment five hundred and sixty-nine two Reading mode

WordPress beautification: Mockingbird Begin theme home page reading full text button beautification

Recently, I saw many robin themed article list pages on the Internet were beautified. The effect is that when the mouse does not reach the article block, the position of reading the full text will not be displayed. When the mouse slides to the article block, the display full text button will automatically slide out from the side. I found relevant codes on Zhu Shuming's blog, which are summarized as follows:

Add the following css to the theme option - Custom Style - Custom Style (or add them to the css by yourself).

/*Read full text special effects*/
.post{ overflow : hidden ;- webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}
.post:hover{box-shadow:0 0 20px 3px #dfe9f7 ; border : 1px solid #eaeaea ; z-index :2; box-shadow:0 0 20px 3px #dfe9f7 ; border : 1px solid #eaeaea ; z-index :2; border : 1px dashed #39c }
.entry-more a{ position : absolute ; width : 82px ; right right :- 80px ; webkit-transition: all .4s;- moz-transition: all .4s;- o-transition: all .4s; transition: all .4s; opacity:0}
.post:hover .entry-more a{ right right :0; opacity:.7}

Statement: This resource is collected by Watson's blog [wosn. net] and collated on the network. It is only used for exchange and learning, and should not be used for other purposes. In case of infringement, please contact Watson Blog[ admin@wosn.net ]Delete processing.

Comment