htmlcssvue.jsgoogle-material-icons

How to add a hover effect to increase size of text within a Vue tag?

The current code only enlarges the icon. What is the way to make it so that the text next to the icon also enlarges?

enter image description here

<style scoped>
.material-icons:hover {
    transform: scale(1.2);
}
</style>

<template>
    <div @click="folderFinder(folder)" v-for="folder in DisplayedFolders">
         <i class="material-icons">{{folder.DisplayIcon}}</i>
             {{folder.DisplayText}}
    </div>
</template>
Solution

  • You can apply transform style in the wrapper class which contains both icon as well as the text.

    Demo :

    .transform-me {
  margin-left: 100px;
}

.transform-me:hover {
  transform: scale(1.2);
}
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="transform-me">
<i class="material-icons">folder</i>Hello World!
</div>